Angular to view iScroll

Question

I am trying to keep track of when a user scrolls in IScroll (v5).

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

  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 use ngIscroll to connect a scroller.

So should I write my directive? Or should I use the $ .watch method ??? Any suggestions on how to make this work?

Answer 1

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

Right

 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 suppose you want to create your own directive, but there is a cool ready-to-use directive that works great with both, IScroll 4 and 5.

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