使用ng-repeat和limit-to以及来自tether.js的工具提示时,在jQuery中获取上下文错误

Question

首先,我知道这是一个标题.

我最近接管了angular-tooltip,并试图为我的主要工作项目构建一个自定义工具提示.

在我的项目中,我有一个简单的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>

现在,如果你注意到,在ng-repeat中我有一个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)

App.js第262行是上面提供的指令的链接功能.

对于我的生活,我无法弄清楚在初始化limitTo增加之后重复元素中的上下文未定义的原因.我可以验证的是,删除limitTo过滤器会导致每个元素的行为都很好.我还可以验证的是,如果我将初始limitTo值设置为0并在之后增加,则初始3个元素不起作用.

查看源代码可以limitTo让我相信每次限制更改的数量时都会构建一个新数组.至于我的理解,这应该导致angular删除所有DOM元素,然后更改它们,但我不知道这种改变是否会以任何方式影响这一点.

我知道,没有多少关的工作,但我失去了对如何调试这一点,可以得到任何帮助,或者是否有任何行为NG-重复我不知道的,可以解释这一点.

Answer 1

显然，问题在于 Angular-tooltip 库中缓存了错误的数据。正在解析对模板的整个请求，而不仅仅是其内容。该问题与 ngRepeat 无关；limitTo 之前的前 n 个项目将触发 GET 请求，因为模板数据尚未填充 templateCache，但稍后它们将尝试访问整个请求的内容。