First of all, I know the title trait.
I recently adopted angular-tooltip and am trying to create a custom tooltip for my main working project.
In my project, I have an ng-repeat directive that just says
<div class="row-submenu-white" ng-repeat="merge in potentialMerges | limitTo: numPotentialMergesVisible" company-profile-tooltip="merge.preview"></div>
Using the instructions for the library, I defined my own tooltip tooltip:
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(); }); } }; }]);
The company .profile.html is simple:
<div>Hello, world!</div>
Now, if you notice, in ng-repeat I have a limitTo filter. For each of them (inititally 3), the work merges perfectly, where the hint <div>Hello, world!</div> added.
Then I run limitTo to limit a larger number. Each repeating element after the initial 3 gives me the following error:
TypeError: context is undefined if ( ( context.ownerDocument || context ) !== document ) {
A bug in jquery-2.1.1.js, debugging of which seems hopeless above my head.
I can tell you that the function called for this line is
Sizzle.contains = function( context, elem ) { // Set document vars if needed if ( ( context.ownerDocument || context ) !== document ) { setDocument( context ); } return contains( context, elem ); };
Using call stack
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)
Line 262 App.js is a communication function of the directive above.
In my life, I cannot understand what the context is undefined in the repeating elements that appear after the initial limitTo increases. What I can check is that removing the limitTo filter causes the behavior in each element to be fine. I can also check that the initial 3 elements do not work if I set the initial value of limitTo to 0 and increase it.
Looking at the source code for limitTo , I believe that a new array is created every time you restrict changes. As for my understanding, this should cause angular to delete all the DOM elements and then change them, but I cannot say if this change will affect it in any way.
I know that working with this is not much, but I am lost as to how to debug it and can appreciate any help, or if any behavior in ng-repeat that I do not know about could explain this.