Angularjs-Direktiven bei Änderungen an DOM-Attributwerten

Question

Ich habe an einem Scrollspy-Modul für Angularjs gearbeitet. Ich bin auf das Problem gestoßen, wo, wenn die Seite mit dynamischem Inhalt beschäftigt ist, die scrollspy Daten (Elementpositionen) schnell veraltet werden. Wie ist der angulare Umgang mit solchen Fragen?

Sollte irgendeine Direktive, die eine DOM-Manipulation durchführt, ein Ereignis sein, nach dem das scrollspy-Modul Ausschau hält - um seine Positionsdaten umzuformen?

Sollte das Scrollspy-Modul alle x Sekunden auf eine Änderung in scrollHeight mit $timeout überprüfen?

Oder noch besser, gibt es eine Möglichkeit zum Binden und Überwachen von DOM-Attributwertänderungen (Attribute wie offsetTop, offsetHeight, scrollHeight, nicht Datenattribute)?

Update: Added code base to GitHub

Answer 1

Mutation Beobachter scheinen die Anlage benötigt werden, leider sind sie only supported by the latest browsers.

var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver; 
if(MutationObserver) { 

    for (var i = 0; i < spyService.spies.length; i++) { 
     var spy = spyService.spies[i].scope.spy; 
     var target = document.getElementById(spy); 

     var config = { 
      attributes: true, 
      childList: true, 
      characterData: true, 
      subtree: true 
     }; 
     var observer = new MutationObserver(function(mutations) { 
      mutations.forEach(function(mutation) { 
       console.warn('mutation observation'); 
      }); 
     }).observe(target, config); 
    } 
} 
else { 
    console.warn('no mutation observers here'); 
    $interval(function() { 
     angular.element(document).ready(function() { 
      console.log('refreshing'); 
     }); 
    }, 2000); 

} 

Derzeit auf der Suche nach einem Polyfill, das tatsächlich funktioniert.

BEARBEITEN: Abfrage wurde als Fallback hinzugefügt, wenn Mutationsbeobachter nicht unterstützt werden.

Answer 2

Ohne den Code, den ich im Dunkeln ein wenig stechend, aber ich würde Ihr scrollspy Modul Prüfung jedes Mal $rootScope erhält einen $digest Anruf vorschlagen. Verwenden Sie also $rootScope.$watch.

$rootScope.$watch(function() { 
    // Update scrollspy data here 
} 

Answer 3

So etwas sollte funktionieren ... scheint aber nicht mit CSS-Übergängen zu aktualisieren.