Ottenere un errore con contesto in jQuery quando si usa ng-repeat e limit-to e un tooltip da tether.js

Question

Prima di tutto, so che è un diamine di un titolo.

Ive ha rilevato recentemente angular-tooltip e sto tentando di creare un suggerimento personalizzato per il mio progetto di lavoro principale.

Nel mio progetto, ho una direttiva ng-repeat che dice semplicemente

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

Utilizzando le istruzioni per la libreria, ho definito una direttiva tooltip personalizzato:

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 è semplicemente:

<div>Hello, world!</div> 

Ora, se si nota, nel ng-ripetere ho un 012.397.749,309 mila Filtro. Per ognuna di quelle (inizialmente 3) le fusioni funzionano perfettamente, in cui una descrizione comando <div>Hello, world!</div> viene aggiunta correttamente.

Quindi si attiva lo limitTo per limitare a un numero maggiore. Ogni elemento ripetuto dopo l'iniziale 3 mi dà il seguente errore:

TypeError: context is undefined 


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

L'errore è in jQuery-2.1.1.js, che il debug sembra essere irrimediabilmente sopra la mia testa.

Quello che posso dirvi è che la funzione viene chiamata per quella linea è

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

Con una chiamata pila di

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 linea 262 essendo la funzione di collegamento della direttiva fornito sopra.

Per la vita di me, non riesco a capire cosa rende il contesto indefinito in elementi ripetuti che vengono dopo l'iniziale limitTo è aumentato. Quello che posso verificare è che la rimozione del filtro limitTo fa sì che il comportamento sia corretto in ogni elemento. Quello che posso anche verificare è che i 3 elementi iniziali non funzionano se imposto il valore limitTo iniziale su 0 e lo aumento dopo.

Guardare il codice sorgente per limitTo mi porta a credere che un nuovo array viene costruito ogni volta che si limita la quantità di modifiche. Per quanto ne so, questo dovrebbe causare angolare la rimozione di tutti gli elementi DOM e quindi modificarli, ma non posso dire se tale modifica potrebbe cambiare in alcun modo.

So che non c'è molto da lavorare, ma sono perso su come eseguire il debug di questo e potrebbe apprezzare qualsiasi aiuto, o se c'è qualche comportamento in ng-repeat che non sono a conoscenza di ciò che potrebbe spiegare Questo.

Answer 1

Apparentemente, il problema era che i dati errati venivano memorizzati nella libreria angular-tooltip. L'intera richiesta per il modello è stata analizzata, anziché solo il contenuto di esso. Il problema non aveva nulla a che fare con ngRepeat; i primi n-elementi prima del limiteTo sparavano una richiesta GET perché i dati del modello non avevano ancora compilato il templateCache, ma in seguito avrebbero cercato di accedere al contenuto dell'intera richiesta.

Answer 2

Direi che elem non viene aggiunto al dominio "abbastanza veloce" quando si aggiorna numPotentialMergesVisible.

provare quanto segue:

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

In questo modo il metodo di impostazione hover verrà eseguito dopo il cambio di valore della variabile $ portata è stata gestita.