Comment lier événement scroll sur l'élément dans AngularJS directive

Comment puis-je lier événement scroll sur l'élément dans AngularJS directive ?

Je la lie de défilement sur $la fenêtre, mais maintenant j'ai besoin de changer pour cette classe ".corps-wrapper" (angulaire.élément(document.queryselector(.corps-wrapper)) ne fonctionne pas) .

Des idées ?

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

OriginalL'auteur Arri | 2017-05-21

  1. 11

    Aucune raison pour que cela ne fonctionnerait pas.

    Cet exemple simple montre qu'il n'-

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

    Plunker exemple

    si, pour une raison quelconque, il n'est pas de travail, poste le code complet.

    Modifier après la discussion:

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

    Changer le cas de "la roulette de la souris" fait le tour.

    Travail de violon

    Merci , mais comment puis-je l'utiliser dans la directive ? angulaire.élément(document.querySelector('.ngscroll-container")).bind('défilement', function(){ alert('le défilement est cool!'); }); Ne marche pas
    Est l' ".ngscroll-container " est dans le modèle html de la directive?
    Ses généré à partir d'un autre angulaire de la directive (Personnalisé de barre de défilement)
    Vous pouvez poster votre code ou une partie de ce qui est en travail et en montrant le bug?
    Jsfiddle ici 🙂 Jsfiddle

    OriginalL'auteur Ziv Weissman

  2. 11

    Vous auriez normalement faire une nouvelle directive pour que.

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

    Maintenant, utilisez ce directive où vous en avez besoin pour ajouter l'événement scroll.

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

    Directives sont les preferrd et plus propre méthode d'accès aux éléments du DOM dans Angularjs, au lieu de angular.element.

    De cette façon, c'est bien aussi , mais j'ai un problème ... dans la principale directive im déjà utilisé un autre elem . Je peux utiliser 2 de la directive, mais ce n'est pas le meilleur moyen je pense :/
    Pouvez-vous développer? Avoir deux directives sur un élément, ou d'avoir des directives à l'intérieur d'une autre directive du modèle n'est pas un problème. Vous l'avez sans doute déjà à l'aide d'autres directives (comme ngClick, ngHref).
    Veuillez vérifier cette jsfiddle
    mise à Jour

    OriginalL'auteur squgeim

  3. 4

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

    angular.element($window).bind('mousewheel', function () {  
  //enter code here  
}
    Devrait être acceptée réponse! 🙂
    Vous pouvez faire défiler un élément sans l'aide de la molette de la souris, de sorte que cette réponse peut ne pas fonctionner dans tous les cas.

    OriginalL'auteur dia

  4. 3

    La façon la plus propre que j'ai trouvé 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 code Html:

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

    OriginalL'auteur heriberto perez