Получение ошибки с контекстом в jQuery при использовании ng-repeat и limit-to и всплывающей подсказки из tether.js

Во-первых, я знаю, что это чертовски титул.

Я недавно принял угловую подсказку и пытаюсь создать настраиваемую подсказку для своего основного рабочего проекта.

В моем проекте у меня есть директива ng-repeat, которая просто говорит:

<div class="row-submenu-white" ng-repeat="merge in potentialMerges | limitTo: numPotentialMergesVisible" company-profile-tooltip="merge.preview"></div>

Используя инструкции для библиотеки, я определил пользовательскую директиву подсказки:

myApp.directive('companyProfileTooltip', ['$tooltip', ($tooltip) => {
    return {
        restrict: 'EA',
        scope: { profile: '@companyProfileTooltip' },
        link: (scope: ng.IScope, elem) => {
            var tooltip = $tooltip({
                target: elem,
                scope: scope,
                templateUrl: "/App/Private/Content/Common/company.profile.html",
                tether: {
                    attachment: 'middle right',
                    targetAttachment: 'middle left',
                    offset: '0 10px'
                }
            });

            $(elem).hover(() => {
               tooltip.open();
           }, () => {
                tooltip.close();
           });
        }
    };
}]);

Company.profile.html это просто:

<div>Hello, world!</div>

Теперь, если вы заметили, в нг-повтор у меня есть limitTo фильтр. Для каждого из этих (изначально 3) слияний работают отлично, где <div>Hello, world!</div> Подсказка добавлена ​​правильно.

Тогда я вызываю limitTo ограничить большим числом. Каждый повторяющийся элемент после начальных 3 дает мне следующую ошибку:

TypeError: context is undefined


if ( ( context.ownerDocument || context ) !== document ) {

Ошибка находится в jquery-2.1.1.js, отладка которого, похоже, безнадежна.

Я могу вам сказать, что функция, вызываемая для этой строки,

Sizzle.contains = function( context, elem ) {
    // Set document vars if needed
    if ( ( context.ownerDocument || context ) !== document ) {
        setDocument( context );
    }
    return contains( context, elem );
};

С помощью стека вызовов

Sizzle</Sizzle.contains(context=Document 046f7364-fa8d-4e95-e131-fa26ae78d108, elem=div)jquery-2.1.1.js (line 1409)
.buildFragment(elems=["<div>\r\n Hello, world!\r\n</div>"], context=Document 046f7364-fa8d-4e95-e131-fa26ae78d108, scripts=false, selection=undefined)jquery-2.1.1.js (line 5123)
jQuery.parseHTML(data="<div>\r\n Hello, world!\r\n</div>", context=Document 046f7364-fa8d-4e95-e131-fa26ae78d108, keepScripts=true)jquery-2.1.1.js (line 8810)
jQuery.fn.init(selector="<div>\r\n Hello, world!\r\n</div>\r\n", context=undefined, rootjQuery=undefined)jquery-....2.1.js (line 221)
jQuery(selector="<div>\r\n Hello, world!\r\n</div>\r\n", context=undefined)jquery-2.1.1.js (line 76)
compile($compileNodes="<div>\r\n Hello, world!\r\n</div>\r\n", transcludeFn=undefined, maxPriority=undefined, ignoreDirective=undefined, previousCompileContext=undefined)angular.js (line 6812)
m()angular....min.js (line 2)
.link/<()app.js (line 262)
jQuery.event.special[orig].handle(event=Object { originalEvent=Event mouseover, type="mouseenter", timeStamp=0, more...})jquery-2.1.1.js (line 4739)
jQuery.event.dispatch(event=Object { originalEvent=Event mouseover, type="mouseenter", timeStamp=0, more...})jquery-2.1.1.js (line 4408)
jQuery.event.add/elemData.handle(e=mouseover clientX=980, clientY=403)jquery-2.1.1.js (line 4095)

Строка 262 App.js является функцией связи директивы, представленной выше.

Что касается меня, я не могу понять, что делает контекст неопределенным в повторяющихся элементах, которые появляются после первоначального limitTo увеличена. То, что я могу проверить, это то, что удаление limitTo фильтр заставляет поведение быть хорошим в каждом элементе повсюду. Что я также могу проверить, так это то, что начальные 3 элемента не работают, если я установил начальные limitTo значение до 0 и увеличить его после.

Глядя на исходный код для limitTo приводит меня к мысли, что новый массив создается каждый раз, когда количество, которое вы ограничиваете изменениями. Насколько я понимаю, это должно заставить angular удалить все элементы DOM и затем изменить их, но я не могу сказать, повлияет ли это изменение на это каким-либо образом.

Я знаю, что работать не над чем, но я заблудился относительно того, как отлаживать это, и мог бы оценить любую помощь, или если есть какое-то поведение в ng-repeat, которое я не знаю, которое могло бы объяснить это.

Источник

2 ответа

Решение

Очевидно, проблема заключалась в том, что в библиотеке angular-tooltip кэшировались неправильные данные. Был проанализирован весь запрос шаблона, а не только его содержимое. Эта проблема не имела ничего общего с ngRepeat; первые n-элементы перед limitTo будут запускать запрос GET, потому что данные шаблона еще не заполнили templateCache, но позже они будут пытаться получить доступ к содержимому всего запроса.

Источник

Я бы догадался, что elem не добавляется в домен "достаточно быстро" при обновлении numPotentialMergesVisible,

Попробуйте следующее:

myApp.directive('companyProfileTooltip', ['$tooltip', ($tooltip) => {
    return {
        restrict: 'EA',
        scope: { profile: '@companyProfileTooltip' },
        link: (scope: ng.IScope, elem) => {
            var tooltip = $tooltip({
                target: elem,
                scope: scope,
                templateUrl: "/App/Private/Content/Common/company.profile.html",
                tether: {
                    attachment: 'middle right',
                    targetAttachment: 'middle left',
                    offset: '0 10px'
                }
            });
             $timeout(()=> {
                $(elem).hover(() => {
                   tooltip.open();
               }, () => {
                    tooltip.close();
               });
           },1);
        }
    };
}]);

Таким образом, метод настройки наведения будет выполняться после обработки изменения значения переменной $scope.

Источник
Другие вопросы по тегам