1

我为我的 Angular 应用程序创建了一个模块，并且我有两个相似的指令与它们相关联。

当滚动到页面底部时触发一个（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”就会被调用。为什么是这样？

4

1 回答 1

2

这与 angular.js 完全无关。

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

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

  • 使用添加捕获onscroll然后将更改传播到所有指令的角度服务。
  • 使用具有相同功能的 JavaScript 库。
  • 在挖掘了第三个选项之后：Angular 具有bind相同的功能。作为选项 2。
于 2013-05-06T18:04:00.543 回答