Erhalte einen Fehler mit Kontext in jQuery, wenn ich ng-repeat und limit-to benutze und einen Tooltip von tether.js

Question

Als Erstes weiß ich, dass es ein Titel ist.

Ive vor kurzem übernommen angular-tooltip und versuche, einen benutzerdefinierten Tooltip für mein Hauptarbeitsprojekt zu erstellen.

In meinem Projekt habe ich eine ng-Repeat-Direktive, die

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

Verwenden Sie den Anweisungen für die Bibliothek einfach sagt, ich eine benutzerdefinierte Tooltip Richtlinie definiert:

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 ist einfach:

<div>Hello, world!</div> 

Nun, wenn Sie bemerken, im ng-repeat ich habe einen limitTo Filter. Für jeden dieser (ursprünglich 3) Zusammenführungen funktioniert perfekt, wo ein <div>Hello, world!</div> Tooltip ordnungsgemäß hinzugefügt wird.

Dann trigger ich die limitTo auf eine größere Anzahl zu begrenzen. Jedes wiederholtes Element nach den ersten 3 gibt mir die folgende Fehlermeldung:

TypeError: context is undefined 


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

Der Fehler ist in jquery-2.1.1.js, die das Debuggen hoffnungslos über den Kopf zu sein scheint.

Was ich Ihnen sagen kann ist, dass die Funktion für diese Zeile

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

Mit einem Call-Stack von

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 Linie 262 die Verknüpfungsfunktion der Richtlinie zu sein heißt zu werden oben geliefert.

Für das Leben von mir, ich kann nicht herausfinden, was den Kontext, in wiederholten Elementen undefined macht, das kommt, nachdem die anfänglichen limitTo erhöht. Was ich verifizieren kann ist, dass das Entfernen des limitTo Filters das Verhalten in jedem Element in Ordnung bringt. Was ich auch überprüfen kann ist, dass die ersten 3 Elemente nicht funktionieren, wenn ich den ursprünglichen limitTo Wert auf 0 setze und ihn danach erhöhe.

Blick auf den Quellcode für limitTo führt mich zu der Annahme, dass ein neues Array jedes Mal erstellt wird, wenn die Menge, die Sie auf Änderungen beschränken. Meines Erachtens sollte dies dazu führen, dass eckige alle DOM-Elemente entfernt und dann ändert, aber ich kann nicht sagen, ob sich diese Änderung in irgendeiner Weise ändern würde.

Ich weiß, dass es nicht viel zu arbeiten gibt, aber ich bin verloren, wie das zu debuggen und würde jede Hilfe zu schätzen, oder wenn es ein Verhalten in NG-Wiederholung, dass ich nicht bewusst, dass dies erklären könnte Dies.

Answer 1

Offenbar war das Problem, dass die falschen Daten in der eckigen Tooltip-Bibliothek zwischengespeichert wurden. Die gesamte Anforderung für die Vorlage wurde analysiert und nicht nur deren Inhalt. Das Problem hatte nichts mit ngRepeat zu tun; Die ersten n-Elemente vor dem LimitTo würden eine GET-Anforderung auslösen, weil die Template-Daten den TemplateCache noch nicht gefüllt hatten, aber später würden sie versuchen, auf den Inhalt der gesamten Anfrage zuzugreifen.

Answer 2

Ich würde vermuten, dass elem nicht zu dem Dom "schnell genug" hinzugefügt wird, wenn Sie numPotentialMergesVisible aktualisieren.

Versuchen Sie Folgendes:

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); 
     } 
    }; 
}]); 

Auf diese Weise die Hover-Setup-Methode wird nach der Änderung behandelt wurde Variablenwert $ Umfang ausgeführt werden.