1

angular アプリ用のモジュールを作成しました。両方に関連付けた 2 つの同様のディレクティブがあります。

1 つ (whenScrolled) は、無限のページネーションのためにスクロールがページの下部に到達したときにトリガーされます。もう 1 つの (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 要素にアタッチするたびに関数を上書きします。これは、最後に適用したディレクティブのみが機能するという効果があります。関数は 1 つしか存在できませんonscroll。

この制限を何らかの方法で回避する必要があります。

  • キャプチャを追加するAngularサービスを使用してonscroll、変更をすべてのディレクティブに伝播します。
  • 同じことを行う JavaScript ライブラリを使用します。
  • 3番目のオプションを掘り下げた後、Angularにはbind同じ機能があります。オプション 2 として。
于 2013-05-06T18:04:00.543 に答える