角度js滚动指令不起作用答案

【问题标题】：angular js scrolling directive not working角度js滚动指令不起作用
【发布时间】：2019-01-25 08:19:22
【问题描述】：

我正在尝试使用 angular (1.3.14) 指令来处理这样的元素上的滚动事件

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
          });
      }
    }
});

我的问题是滚动事件不会触发。像点击这样的所有其他事件都可以正常工作，但不能滚动。此外，当我尝试获取元素类时，我得到“未定义”并且我的元素具有类。这是html：

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

我不知道这里有什么问题。

【问题讨论】：

滚动事件不会冒泡，它们只会在带有滚动条的特定元素上触发（如果它显示滚动条）。见MDN Event Reference - scroll

标签： javascript angularjs scroll angularjs-directive

【解决方案1】：

您的指令是正确的，我在您的部分中使用内部 div 进行了测试，其中包含一些类以使其可滚动

<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;
    }

活动完美运行！您只需要使您的<section> 可滚动或在body/html 标记中应用该指令。这是我测试过的 Plunker 示例http://plnkr.co/edit/hp2BbnLeGjtwIbfi2mqZ?p=preview

【讨论】：

【解决方案2】：

试试这个

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

【讨论】：