使用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无限滚动和玉

回答

相关问题