4

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?

pedalpete
  • 21,076
  • 45
  • 128
  • 239
  • 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 Jun 18 '13 at 11:30
  • 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 Jun 19 '13 at 03:27
  • I'm sure it's just a copying mistake, but just incase, you typed ' – Ben Taliadoros Sep 25 '14 at 14:53

2 Answers2

4

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

Stewie
  • 60,366
  • 20
  • 146
  • 113
  • Thanks so much Stewie. Good to see I was on the right track. Some of the previous examples I saw had the directive name just hanging out in the tag, without being in a class or anything, and I thought that was really strange. – pedalpete Jun 19 '13 at 12:23
3

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

fabio_biondi
  • 1,047
  • 11
  • 9