CODEWITHSUNDEEP
javascriptangularjsscrollangularjs-directive
Marcin46
Marcin46

Reputation: 120

angular js scrolling directive not working

I'm trying to do angular (1.3.14) directive to handle scrolling event on element like this

var app = angular.module('myApp', []);

app.directive("scroll", function ($window) {
    return {
      restrict: 'A',
      link: function(scope, element, attrs) {
          console.log(element.className); // return 'undefined'
          element.on('scroll', function(e) {
            console.log('scroll'); //not working
          });
          element.on('click', function(e) {
            console.log('click'); //working
          });
      }
    }
});

My problem is that scroll event doesn't fire. Every other event like clicking is normaly working, but scrolling not. Also when I try to get class of element I get 'undefined' and my element has class. It's html:

<body ng-app="myApp" ng-controller="myCtrl" ng-keydown="keyListener($event)">
    <section class="dark content second" scroll="">         
    </section>
</body>

I don't know what can be wrong here.

Upvotes: 0

Views: 1560

Answers (2)

Mikhail Malakhvei
Mikhail Malakhvei

Reputation: 117

Try this

     console.log(attrs.class);
     element.bind('scroll', function() {
        console.log('scroll');
     });

Upvotes: 0

Miguel Castillo
Miguel Castillo

Reputation: 91

Your directive is right, I've made a test with an internal div in your section with some classes to make it scrollable

<section class="dark content second" scroll="">
  Hi         
  <div class="internal">
    Something
  </div>
</section>

CSS

    .second{
      background-color: red;
      max-height: 150px;
     overflow-y:scroll;
    }

   .internal{
      height: 200px;
    }

And the event works perfectly! You just have to make your <section> scrollable or apply the directive in the body/html tag. Here's the Plunker example that I've tested http://plnkr.co/edit/hp2BbnLeGjtwIbfi2mqZ?p=preview

Upvotes: 2

Related Questions