Angular指令檢測ng-repeat容器內的滾動

在我的Angular應用程序中，我創建了一個簡單的指令來根據提供給類似問題here的答案在滾動上做些事情。Angular指令檢測ng-repeat容器內的滾動

下面是代碼我onScroll指令：

(function() { 
    'use strict'; 

    angular 
     .module('proverbial') 
     .directive('onScroll', Directive); 

    Directive.$inject = [ '$document' ]; 
    function Directive($document) { 

     var directive = { 
      link: link, 
      restrict: 'A' 
     }; 
     return directive; 

     function link(scope, element, attrs) { 
      element.bind('scroll', function(e) { 
       console.warn(e) 
       if (element[ 0 ].scrollTop + element[ 0 ].offsetHeight >= element[ 0 ].scrollHeight) { 
        scope.$apply(attr.onScroll); 
       } 
      }); 
     } 
    } 
})();

這是在下面的HTML模板中使用：

<div class="absolute" on-scroll="vm.totalDisplayed += 100"> 
    <span class="card hover" 
    ng-repeat="proverb in vm.proverbs | limitTo: vm.totalDisplayed"> 
     <a>{{proverb.text | maxLength: 90}}</a> 
    </span> 
</div>

的目的是保持頁面滾動增加vm.totalDisplayed，以創建一個類似於延遲加載的效果。

但是，當我向下滾動到已經加載了ng-repeat的結尾時，什麼也沒有發生。 console.warn(e)從不觸發。

在瀏覽器控制檯上，我可以看到包含<div class="absolute" on-scroll="vm.totalDisplayed += 100">確實向上滾動瀏覽器的窗口。

什麼是缺失？

來源

2017-04-02 Tiago

'attr.onScroll'是一個不會被執行的字符串： 'scope。$ apply（attr.onScroll）;' – charlietfl

儘管@湯姆指出正確的，我在我的指示一syntatic錯誤，事實證明，這不是問題。

的問題是該元素，而我附上了我的指令實際上並沒有被滾動，由於它的CSS樣式，所以我不得不稍微調整代碼，通過結合scroll到$document代替：

(function() { 

    'use strict'; 

    var angular = window.angular || {}; 

    angular 
     .module('proverbial') 
     .directive('onDocumentScroll', Directive); 

    Directive.$inject = ['$document']; 

    function Directive($document) { 

     var directive = { 
      link: link, 
      restrict: 'A' 
     }; 

     return directive; 

     function link(scope, element, attrs) { 
      $document.bind('scroll', function() { 
       if ($document.scrollTop() - scope.vm.latestThreshold >= element[0].offsetHeight) { 
        scope.vm.latestThreshold += $document.scrollTop(); 
        scope.$apply(attrs.onDocumentScroll); 
       } 
      }); 
     } 
    } 
})();

這解決了我的問題。

來源

2017-04-08 16:28:45 Tiago

你在你的代碼中的小的失誤：

if (element[ 0 ].scrollTop + element[ 0 ].offsetHeight >= element[ 0 ].scrollHeight) { 
    scope.$apply(attr.onScroll); 
}

attr是不確定的。應該是attrs。

此外，我不能重現該問題。我從你的代碼中創建了一個Plunker，警告顯示很好。只有我覺得奇怪的是我無法獲得vm.totalDisplayed += 100的工作。 vm.totalDisplayed = vm.totalDisplayed + 100雖然工作。

http://plnkr.co/edit/ooMFG4ZAZzxJf9zuChyA

來源

2017-04-02 17:55:52 Tom

Angular指令檢測ng-repeat容器內的滾動

回答

相關問題