Angularjs directive updates to change DOM attribute values

Question

I am working on a scrollspy module for Angularjs. I ran into a problem where, if a page deals with dynamic content, scrollspy data (element positions) quickly become outdated. What is the angular way to solve such problems?

If any directive that manipulates the DOM $broadcast event that the scrollspy module is looking for allows it to reorganize its location data?

Should the scrollspy module check every x seconds for a change in scrollHeight with $timeout ?

Or even better, is there a way to bind and view changes to the DOM attribute value (attributes such as offsetTop , offsetHeight , scrollHeight , not data attributes)?

Update: Added code base for GitHub

Answer 1

Mutations Observers seem to be necessary, unfortunately, they are 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); } 

We are currently searching for a polyfill that really works.

EDIT: Added polling as a backup if Mutation Observers are not supported.

Answer 2

Something like this should work ... doesn't seem to be updated with CSS transitions.

 scope.$watch(function(){ return elem[0].offsetLeft; }, function(x){ console.log('ITEM AT '+x); }); 

Answer 3

Without code, I flinch a little in the dark, but I suggest your scrollspy module check every time $rootScope receives a call to $digest . So use $rootScope.$watch .

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