Watch Number of Children Under Attribute Directive Element

Question

All,

I have an attribute directive called scrolly. The directive looks like this:

.directive('scrolly', function () {
return {
    restrict: 'A',
    scope: {
      scrollFunction: '&scrolly'
    },
    link: function (scope, element, attrs) {
        var raw = element[0];
        scope.$watch(element[0].children.length, function(){
          if(raw.clientHeight <= raw.scrollHeight){
            scope.scrollFunction();
          }
        });

        element.bind('scroll', function () {
            if (raw.scrollTop + raw.offsetHeight >= raw.scrollHeight) {
                scope.scrollFunction();
            }
        });
    }
};

})

The objective is to perform an infinite scroll. The scroll part works fine. The part that isn't working is the scope.$watch part. Basically, the objective for the watch portion is to execute the paging function until the element becomes scrollable at which point the scroll binding would take over. Although the purpose of my directive is paging, I do not want to get hung up on that. The root question is how to watch an attribute of an element.

Duplicate http://stackoverflow.com/questions/21332671/angularjs-watch-dom-change — ribsies, Mar 10 '16 at 17:18
you're right, this is a duplicate. My bad. I searched for a good long while, and didn't come across any that clearly addressed this question. Thanks! — Stephen Hartzell, Mar 10 '16 at 17:21
I'm not being mean but it was literally the first entry when I googled "angular watch element" — ribsies, Mar 10 '16 at 17:23
I kept searching things like "angular directive watch element attributes" — Stephen Hartzell, Mar 10 '16 at 19:32

score 0 · Answer 1 · answered Mar 10 '16 at 17:16

0

scope.$watch(angular.bind(element, function(){
       return element.children.length;
    }), function(oldValue, newValue) {
    if(raw.clientHeight <= raw.scrollHeight){
        scope.scrollFunction();
    }
});

answered Mar 10 '16 at 17:16

Duncan

2,550
2
17
18

score 0 · Answer 2 · answered Mar 10 '16 at 17:18

0

In a $watch you can use a function as the watch parameter to watch specific properties on things.

scope.$watch(function() {
  return element[0].children.length;
},
function() {
  // do your thang on change
})

answered Mar 10 '16 at 17:18

ribsies

1,218
2
10
16

Watch Number of Children Under Attribute Directive Element

2 Answers2