角度中同一模块的多个指令

Question

我已经为我的角度应用程序创建了一个模块，并且我有两个与此相关联的类似指令。

当滚动到达页面底部进行无限分页时，将触发一个（whenScrolled）。 另一个（fromTop）触发“顶部”或“底部”，可用于隐藏/显示页面上的“转到顶部”链接。 这就是我设置它们的方式：

angular.module('scroll', []).directive('fromTop', function() {
  return function(scope, element, attributes) {
    var raw = element[0]
    var scrollDistance = Math.round(window.outerHeight)

    window.onscroll = function() {
      console.log(window.pageYOffset, raw.scrollHeight + scrollDistance)
      if (window.pageYOffset >= raw.scrollHeight + scrollDistance) {
        scope.position = 'bottom'
        scope.$apply(attributes.fromTop)
      } else {
        scope.position = 'top'
        scope.$apply(attributes.fromTop)
      }
    }
  }
}).directive('whenScrolled', function() {
  return function(scope, element, attributes) {
    var raw = element[0]
    var scrollDistance = Math.round(window.outerHeight)

    window.onscroll = function() {
      //console.log(window.pageYOffset, raw.scrollHeight - scrollDistance)
      if (window.pageYOffset >= raw.scrollHeight - scrollDistance) {
        scope.$apply(attributes.whenScrolled)
      }
    }
  }
});

不幸的是，这不起作用。 似乎“ whenScrolled”指令正在覆盖“ fromTop”，并且fromTop永远不会被调用。 但是，如果我删除“ whenScrolled”，那么“ fromTop”就可以了。 为什么是这样？

Answer 1

这与angular.js完全无关。

您的问题：每次将指令附加到DOM元素时，都会覆盖window.onscroll函数，其结果是只有最后一个应用的指令才起作用。 只能有一个onscroll功能。

您需要通过以下方法解决此限制：

• 使用添加的角度服务可捕获onscroll ，然后将更改传播到所有指令。
• 使用具有相同功能的JavaScript库。
• 经过一些挖掘后的第三个选项：Angular具有bind函数，它的功能相同。 作为选项2。