滚动通过NG-视图时无尽滚动不AngularJS工作 [英] Endless scroll doesn't work in AngularJS when scrolling over a ng-view

问题描述

我使用code如这创造AngularJS无限滚动效果。我试图通过移动滚动容器的内容重构一些code的，（在这种情况下， UL ），以一个单独的HTML文件，然后用NG-视图加载内容。

I am using code like this to create an endless scroll effect in AngularJS. I tried to refactor some of the code, by moving the content of the scrollable container (in this case the ul) to a seperate html file, and then use a ng-view to load the content.

在此完成了 $范围适用（attr.whenScrolled）; 不产生任何影响。在 loadMore（）方法是根本无法再调用。

After this is done the scope.$apply(attr.whenScrolled); doesn't have any effect. The loadMore() method is simply not called anymore.

我有没有移动UL-内容，以一个单独的文件，并在动态加载后改变了一些有关范围有多大？

Have I changed something about the scope after moving the ul-content to a seperate file, and loading it in dynamically?

更新：
这里是code：

Update: Here is the code:

App.directive('whenScrolled', function() {
return function(scope, element, attr) {
    var raw = element[0];

    // binding on element doesn't work so this is a temp fix
    $(document).bind('scroll', function() {
      var scrollPercentage = (($(window).scrollTop() + $(window).height()) / $(document).height()) * 100;

      if(scrollPercentage > 75 && !scope.in_progress && !scope.is_reached_end)
      {
        console.log('test')
        scope.$apply(attr.whenScrolled);
      }
    });
};

}）;

App.config(['$routeProvider', function($routeProvider){
  $routeProvider.when('/', {
    templateUrl: 'views/offers.html',
    controller: 'OffersCntl'
  });
}]);

视图：

<div class="tileContainer" ng-controller="OffersCntl">
    <h2>Something very important :)</h2>
    <div id="tiles" class="tiles" when-scrolled="loadMore()">
        <div ng-view></div>
    </div>
</div>  

我有一个相当脂肪控制器，这是我不想polute与职。它基本上有一个scope.loadMore方法。

I have a rather fat controller, which I don't want to polute the post with. It basically have a scope.loadMore method.

推荐答案

使用 NG-包括而不是 NG-视图。

http://jsfiddle.net/pvtpenguin/U7Bz9/540/

例如，在您的视图：

 <div class="tileContainer" ng-controller="OffersCntl">
   <h2>Something very important :)</h2>
   <div id="tiles" class="tiles" when-scrolled="loadMore()">
     <div ng-include src="'offer.html'"></div>
   </div>
 </div>  

这篇关于滚动通过NG-视图时无尽滚动不AngularJS工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！