當在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); 
    }; 
}());