当我们在angularjs中使用无限滚动时如何获取加载gif图像?

时间:2015-09-11 11:38:47

标签: angularjs

假设数据是否更多并且我们保持无限滚动无限滚动距离= 2,当数据加载时,必须显示加载gif的图像..是否可以做..我可以它的任何一个例子?

1 个答案:

答案 0 :(得分:0)

您可以使用ng-hide指令。您需要添加加载图像,该图像将按照ng-hide

上的内容加载工作

角色代码

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

  angular.module('scroll', []).directive('whenScrolled', function() {
    return function(scope, elm, attr) {
      var raw = elm[0];

      elm.bind('scroll', function() {
        if (raw.scrollTop + raw.offsetHeight >= raw.scrollHeight) {
            scope.$apply(attr.whenScrolled);
        }
      });
   };
 });

<强> HTML

<div id="fixed" when-scrolled="loadMore()">
    <ul>
      <li ng-repeat="i in items">{{i.id}}</li>
    </ul> 
    <img src="http://jimpunk.net/Loading/wp-content/uploads/loading1.gif" ng-hide="!showLoader"/>        
 </div>

小提琴:https://jsfiddle.net/anandgh/LedkLocL/ 希望这会对你有所帮助。