我正在使用像这样的代码在AngularJS中创建无限滚动效果。我试图重构一些代码,将可滚动容器(在本例中是
- )的内容移动到单独的HTML文件中,然后使用ng-view加载内容。
完成后,
scope.$apply(attr.whenScrolled)
不起作用了。 loadMore()
方法不再被调用。当我将ul内容移动到单独的文件中并动态加载时,是否改变了作用域?
更新: 以下是代码:
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方法。