使用angularjs無限滾動和玉

我使用angularjs無限scroll在我的儀表盤的web應用程序。我有一個包含多個無限可滾動窗口小部件的頁面。因爲我想爲他們每個人都有一個無限滾動，所以我決定使用this指令，但不知如何，它不能按預期工作。我希望無限滾動相對於內容div滾動條工作，它使用完美的scrollbar而不是主瀏覽器窗口。我已經搜索谷歌和發現多線程解釋可用於更改默認行爲2個新的變量：無限滾動容器和無限滾動父。我嘗試了兩種方法，但他們都沒有爲我工作。我認爲使用完美的滾動條正在創造這個問題。使用angularjs無限滾動和玉

玉代碼：

  .hor-col(ng-repeat="stream in socialStreams") 
       .box-body(style='min-height: 400px;') 
        perfect-scrollbar.timeline-scroller(wheel-propagation="true" wheel-speed="1" min-scrollbar-length="8" suppressScrollX="true" id="streamScroll-{{$index}}") 
         div(infinite-scroll="loadMorePosts(stream['streamId'], stream['endCursor'])", infinite-scroll-disabled="stream['infiniteScrollDisabled']", infinite-scroll-container="'#streamScroll-{{$index}}'")

由於存在多個窗口小部件，我不能使用相同的id或類無限滾動容器，因此決定採用動態ID生成。

我怎麼能注入無限滾動容器內的動態類？

我收到以下錯誤：

Error: Failed to execute 'querySelector' on 'Document': '#streamScroll-{{$index}}' is not a valid selector.

附：我已經看到下面的線程，但沒有人捂住了我的要求：

https://github.com/sroze/ngInfiniteScroll/issues/57

angularjs infinite scroll in a container

AngularJS - ng-repeat to assign/generate a new unique ID

來源

2015-10-17 dark_shadow

我不知道你所需要的無限滾動容器內的參數大括號。你應該通過可計算串在裏面，所以我建議你試試這樣：

infinite-scroll-container="'#streamScroll-' + $index"

因爲這個參數，像其他人一樣，不需要用花括號內插，它準備採取的表達。

來源

2015-10-21 11:16:26 punov

感謝這個作品像一個魅力:) –

太棒了！非常高興它有幫助。 – punov

它是不是一個實際的解決問題的辦法，但它是值得一試。
我可以告訴你如何編寫自己的無限滾動指令。下面的代碼：

HTML

<div infinite-scroll="loadSomeData()" load-on="scrollToTop"> 
...  
</div>

的指令：

app.directive('infiniteScroll', function() { 
     return { 
      restrict: 'A', 
      link: function ($scope, element, attrs) { 
       var raw = element[0]; 
       element.bind('scroll', function() { 
        if (attrs.loadOn === 'scrollToTop') { 
         if (raw.scrollTop === 0) { 
          $scope.$apply(attrs.infiniteScroll); 
         } 
        } else { 
         if (raw.scrollTop + raw.offsetHeight >= raw.scrollHeight) { 
          $scope.$apply(attrs.infiniteScroll); 
         } 
        } 
       }); 
      } 
     }; 
    } 
);

在HTML的控制器：

$scope.loadSomeData = function() { 
    // Load some data here. 
};

注意load-on="scrollToTop"是在HTML可選div標記。這隻有當你想在滾動到頂部時執行loadSomeData()函數，否則當滾動到div底部時它將執行該函數。

來源

2015-10-27 15:20:04

角材料具有非常有用的無限滾動。我想你應該看看它Infinite Scroll

來源

2015-10-27 15:25:46

使用angularjs無限滾動和玉

回答

相關問題