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”，而toTop永远不会被调用。但是，如果我删除“whenScrolled”，“fromTop”被调用就好了。这是为什么？

Answer 1

这与angular.js完全无关。

您的问题：每次将指令附加到DOM元素时都会覆盖window.onscroll函数，这会导致只有最后一个应用指令才有效。只能有一个onscroll功能。

你需要解决这个限制：

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

角度相同模块的多个指令

1 个答案: