首先,我知道这是一个非常棒的标题。
我最近接手了 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
filter 使每个元素的行为在整个过程中都很好。我还可以验证的是,如果我设置初始 limitTo
,初始 3 个元素将不起作用。值为 0 并在之后增加它。
查看 limitTo
的源代码让我相信每次您限制更改的数量时都会构造一个新数组。根据我的理解,这应该会导致 Angular 删除所有 DOM 元素然后更改它们,但我无法判断该更改是否会以任何方式影响它。
我知道没有太多工作要做,但我不知道如何调试它并且希望得到任何帮助,或者如果 ng-repeat 中有任何我不知道的行为可以解释这个.
最佳答案
我猜当您更新 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 变量值更改后执行。
关于javascript - 使用 ng-repeat 和 limit-to 以及来自 tether.js 的工具提示时,在 jQuery 中出现上下文错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26878052/