我使用像
this这样的代码在AngularJS中创建无限滚动效果.我尝试通过将可滚动容器的内容(在本例中为ul)移动到单独的html文件来重构某些代码,然后使用ng-view加载内容.
完成此操作后,范围.$apply(attr.whenScrolled);没有任何影响.不再调用loadMore()方法.
在将ul-content移动到单独的文件并将其动态加载后,我是否更改了有关范围的内容？
更新：
这是代码：
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>
我有一个相当胖的控制器,我不想用它来判断帖子.它基本上有一个scope.loadMore方法.
解决方法
使用ng-include而不是ng-view.
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>
