当在ng-view上滚动时无尽滚动在AngularJS中不起作用

Question

我正在使用类似this的代码在AngularJS中创建无限滚动效果。我试图通过将可滚动容器的内容（在这种情况下为ul）重构为一个单独的html文件来重构一些代码，然后使用ng-view来加载内容。

完成此操作后，scope.$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> 

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

Answer 1

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

Answer 2

该指令使用滚动偏移量以得到弹性的部件，并在一个固定的高度不限制它：

app.directive('whenScrolled', function($window, $timeout) { 
    return { 
    restrict: "A", 
    link: function(scope, element, attr) { 

     // bind the digest cycle to be triggered by the scroll event 
     // when it exceeds a threshold 
     angular.element($window).bind('scroll', function() { 

     var supportPageOffset = window.pageXOffset !== undefined; 
     var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat"); 

     var scrollY = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop; 

     var iScroll = element.prop('offsetTop') + element.prop('offsetHeight'); 
     var iScrooling = scrollY + (this.screen.height * 0.9); 

     //console.log(iScrooling+'/'+iScroll); 

     if (iScrooling >= iScroll) { 
      angular.element($window)[0].requestAnimationFrame(function(){ 
      // invoke the function passed into the 'whenScrolled' attribute 
      scope.$apply(attr.whenScrolled); 

      }) 
     } 

     }); 
    } 
    } 
}); 

您的HTML：

<div class="tileContainer" ng-controller="OffersCntl"> 
    <h2>Something very important :)</h2> 
    <div id="tiles" class="tiles" when-scrolled="loadMore()"> 
    <div ng-repeat="item in items"> 
     {{ item.id }} 
    </div> 
    </div> 
</div> 

的控制器，你可以要求更换该阿贾克斯

$scope.items = []; 

var counter = 0; 
$scope.loadMore = function() { 
    for (var i = 0; i < 5; i++) { 
     $scope.items.push({id: counter}); 
     counter += 10; 
    } 
}; 

$scope.loadMore(); 

如果需要旧的浏览器支持，您可以添加此功能：

//requestAnimationFrame for old browsers 

(function() { 
    var lastTime = 0; 
    var vendors = ['webkit', 'moz']; 
    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) { 
    window.requestAnimationFrame =  window[vendors[x]+'RequestAnimationFrame']; 
    window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame']; 
    } 

    if (!window.requestAnimationFrame) 
    window.requestAnimationFrame = function(callback, element) { 
     var currTime = new Date().getTime(); 
     var timeToCall = Math.max(0, 16 - (currTime - lastTime)); 
     var id = window.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall); 
     lastTime = currTime + timeToCall; 
     return id; 
    }; 

    if (!window.cancelAnimationFrame) 
    window.cancelAnimationFrame = function(id) { 
     clearTimeout(id); 
    }; 
}());