angular directive to watch iScroll

Question

I'm trying to watch for when a user scrolls in an IScroll (v5).

I'm still quite new to angular, and just learning about writing directives. From other examples, I'm trying. My directive is

app.directive('watchScrolling', function(){ 
   return {
      restrict: 'E',
      link: function(scope, elem, attr, ctrl) {
         elem.bind('scroll', function(e) {
            console.log('scrolling');
         });
      }
   };
});

and in my html

<div id="wrapper" class="watch-scrolling">
   <iv class="scroller"> </div>
</div>

I'm using ngIscroll to connect the scroller.

Is this the way I should be writing my directive? Or should I be using the $.watch method??? Any suggestions on how to get this to work?

Answer 1

The problem is in restrictparameter. In your example the directive is restricted to element name, but you are actually using it as CSS class ("watch-scrolling").

Correct:

app.directive('watchScrolling', function(){ 
   return {
      restrict: 'C',
      link: function(scope, elem, attr, ctrl) {
        console.log('Linked');
         elem.bind('scroll', function(e) {
            console.log('scrolling');
         });
      }
   };
});

Plunker

Answer 2

I imagine you want to create your own directive but there is a cool ready-to-use directive that works very well with both, IScroll 4 and 5.

https://github.com/ibspoof/ng-iScroll