角度中同一模塊的多個指令

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。