在 ng-view 上滚动时无限滚动在 AngularJS 中不起作用 [英] Endless scroll doesn't work in AngularJS when scrolling over a ng-view

问题描述

我正在使用像 this 这样的代码在 AngularJS 中创建无限滚动效果.我试图重构一些代码，通过将可滚动容器的内容(在本例中为 ul)移动到一个单独的 html 文件，然后使用 ng-view 加载内容.

完成后 scope.$apply(attr.whenScrolled); 没有任何效果.loadMore() 方法不再被调用.

在将 ul-content 移动到单独的文件并动态加载后，我是否对范围进行了一些更改?

更新:代码如下:

App.directive('whenScrolled', function() {返回函数(范围，元素，属性){var raw = element[0];//在元素上绑定不起作用，所以这是一个临时修复$(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('测试')scope.$apply(attr.whenScrolled);}});};

});

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

视图:

<h2>一些非常重要的事情:)</h2><div id="tiles" class="tiles" when-scrolled="loadMore()"><div ng-view></div>

我有一个相当胖的控制器，我不想用它来污染帖子.它基本上有一个 scope.loadMore 方法.

解决方案

使用 ng-include 而不是 ng-view.

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

例如，在您看来:

 
<h2>一些非常重要的事情:)</h2><div id="tiles" class="tiles" when-scrolled="loadMore()"><div ng-include src="'offer.html'"></div>

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.

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

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

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'
  });
}]);

The view:

<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>  

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

解决方案

Use ng-include instead of ng-view.

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

For example, in your view:

 <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-view 上滚动时无限滚动在 AngularJS 中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！