Angularjs directives updating to changes in DOM attribute values

Question

I've been working on a scrollspy module for Angularjs. I've run into the problem where if the page is dealing with dynamic content, the scrollspy data (element positions) quickly becomes outdated. What is the angularjs way of dealing with issues such as this?

Should any directive that performs DOM manipulation $broadcast an event that the scrollspy module looks out for - allowing it to refactor its position 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 watch for DOM attribute value changes (attributes such as offsetTop, offsetHeight, scrollHeight, not data attributes)?

Update: Added code base to GitHub

Constraining other directives to emit events would likely become unwieldy quickly and certainly make your module unfriendly to work with. There isn't an event for changes to the dim of elements unfortunately, so I am afraid a polling $timeout impl is likely your best candidate. At least it is easily testable with $timeout.flush() :) — SonOfNun
– SonOfNun, Commented Oct 14, 2013 at 6:56
Being the devils advocate here, but what if element heights changed, but the overall scrollHeight did not... Suddenly you need to be checking everything — Patrick
– Patrick, Commented Oct 15, 2013 at 22:46

Patrick · Accepted Answer · 2013-11-26 05:56:59Z

Mutation Observers seem to be the facility needed, 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);

}

Currently searching for a polyfill that actually works.

EDIT: Added polling as a fallback if Mutation Observers aren't supported.

plong0 · Accepted Answer · 2015-12-14 22:04:28Z

1

Something like this should work... doesn't seem to update with CSS transitions though.

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

answered Dec 14, 2015 at 22:04

plong0

2,1891 gold badge19 silver badges19 bronze badges

Comments

Chris Nicola · Accepted Answer · 2013-10-26 16:51:13Z

0

Without the code I'm stabbing in the dark a bit, but I would suggest your scrollspy module check every time $rootScope receives a $digest call. So use $rootScope.$watch.

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

answered Oct 26, 2013 at 16:51

Chris Nicola

14.6k6 gold badges49 silver badges61 bronze badges

3 Comments

Patrick Over a year ago

Sorry, taken me some time to get back to this. Added link to the code on GitHub. Will this be called late enough though, once the DOM has been updated and rendered?

Chris Nicola Over a year ago

Yes it shouldn't get called until after AngularJS has finished loading directives and controllers and binding them.

Patrick Over a year ago

Ran into $digest issues, probably just the current code structure however. Unfortunately this really only takes care of half the problem (assuming it works). A div that changed it's height on click for instance wouldn't be caught, unless it also called scope.$apply(); which is basically the same requirement as calling a re-calc method...

Collectives™ on Stack Overflow

Angularjs directives updating to changes in DOM attribute values

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related