首先，我知道这是一个非常棒的标题。
我最近接管了角工具提示，并试图为我的主要工作项目构建一个自定义工具提示。
在我的项目中，我有一个ng重复指令，简单地说
<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重复中，我有一个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>rn Hello, world!rn</div>"], context=Document 046f7364-fa8d-4e95-e131-fa26ae78d108, scripts=false, selection=undefined)jquery-2.1.1.js (line 5123)
jQuery.parseHTML(data="<div>rn Hello, world!rn</div>", context=Document 046f7364-fa8d-4e95-e131-fa26ae78d108, keepScripts=true)jquery-2.1.1.js (line 8810)
jQuery.fn.init(selector="<div>rn Hello, world!rn</div>rn", context=undefined, rootjQuery=undefined)jquery-....2.1.js (line 221)
jQuery(selector="<div>rn Hello, world!rn</div>rn", context=undefined)jquery-2.1.1.js (line 76)
compile($compileNodes="<div>rn Hello, world!rn</div>rn", 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行是上面提供的指令的链接函数。
在我的一生中，我无法弄清楚是什么使得在初始limitTo增加后出现的重复元素中的上下文未定义。我可以验证的是，删除limitTo过滤器会使整个元素中的行为都很好。我还可以验证的是，如果我将初始limitTo值设置为0并在之后将其增加，则最初的3个元素不起作用。
通过查看limitTo的源代码，我相信每当您限制的数量发生变化时，就会构建一个新的数组。据我所知，这应该会导致angular删除所有DOM元素，然后对其进行更改，但我无法判断这种更改是否会以任何方式影响这一点。
我知道没有什么可做的，但我不知道如何调试它，我很感激任何帮助，或者如果重复中有任何我不知道的行为可以解释这一点。
我想当您更新numPotentialMergesVisible时，elem并没有"足够快"地添加到dom中。
尝试以下操作：
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变量值更改后执行。
显然，问题是在角度工具提示库中缓存了错误的数据。正在分析对模板的整个请求，而不仅仅是它的内容。该问题与ngRepeat无关；limitTo之前的前n个项目将触发GET请求，因为模板数据尚未填充templateCache，但稍后它们将尝试访问整个请求的内容。