web-dev-qa-db-fra.com

Comment lier un événement de défilement sur un élément dans la directive AngularJS

Comment puis-je lier un événement de défilement sur un élément dans la directive AngularJS?

Je lie le défilement sur $ window, mais maintenant je dois le changer pour cette classe ".body-wrapper" (angular.element (document.queryselector (.body-wrapper)) ne fonctionne pas).

Des idées ?

angular.element($window).bind("scroll", function () { 
   ...
})
javascriptangularjsscrollbind
9
Arri

Aucune raison pour que ça ne marche pas.

Cet exemple simple montre qu'il ne-

var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
  angular.element(document.querySelector('.myDiv')).bind('scroll', function(){
      alert('scrolling is cool!');
    })
});

exemple Plunker

si pour une raison quelconque, cela ne fonctionne pas, affichez le code complet.

Modifier après discussion:

Finalement, le problème est lié à l'événement spécifique pour "scroll", il entre probablement en collision avec un autre événement.

Changer l'événement en "molette" a fait l'affaire.

Violon de travail

12
Ziv Weissman

Vous feriez normalement une nouvelle directive pour cela.

app.directive('scroll', [function() {
  return {
    link: function (scope, elem, attrs) {
      elem.on('scroll', function (e) {
        // do your thing
      });
    })
  }
}]);

Maintenant, utilisez cette directive partout où vous devez ajouter l'événement de défilement.

<div class='.body-wrapper' scroll></div>

Les directives sont l'approche préférée et plus propre pour accéder aux éléments DOM dans Angularjs, au lieu de angular.element.

11
squgeim

molette événement déclenche l'événement de défilement vers la fenêtre qu'un événement scroll.

angular.element($window).bind('mousewheel', function () {  
  // enter code here  
}
4
Adi

La façon la plus propre que j'ai trouvée est:

(function() {
  angular
  .module('yourAppName')
  .directive('scrollDirective', ['$window', scrollDirective])

  function scrollDirective($window) {
    return {
      link: function (scope, element, attrs) {
        var handler;
        $window = angular.element($window);

        handler = function() {
          console.log('scrolling....')
        };

        $window.on('scroll', handler);
      }
    };

  };

})();

alors vous pouvez l'utiliser dans votre Html comme:

 <div scroll-directive="">a long list goes here</div>
3
heriberto perez