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?

You can't $watch an event, so elem.bind is a proper way to go. Do you have any concrete problems with your directive? — Stewie
thanks @Stewie, my concrete problem is that it isn't returning any values when I scroll, so that's my starting point :) , sorry I can't be more exact. Not sure what I've got wrong. — pedalpete
I'm sure it's just a copying mistake, but just incase, you typed '<iv' instead of '<div' — Ben Taliadoros

Stewie Stewie · Accepted Answer · 2013-06-19T04:39:17

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

angular directive to watch iScroll

2 Answers