angularjs无限滚动不起作用

我想要无限滚动工作在angularjs没有运气。下面是我的html代码：angularjs无限滚动不起作用

<div ng-app='herbivore' ng-controller='Scroller'> 
         <div id="fixed" when-scrolled="loadMore()"> 
         <div ng-repeat='item in items'> 
          <tr><td style="text-align:center">{{item.id}}</td> 

       </div>     
       </div> 
      </div>

下面是我的angularjs代码：

 function Scroller($scope, $http) { 
$scope.items = []; 

var url = "/admin/getusers?type=" + "today"; 

$scope.loadMore = function() { 

    $http({ 
     'url': url, 
     'method': 'GET' 
    }) 
     .success(function (data) { 

    var items = data.response;  
    for (var i = 0; i < items.length; i++) { 
     if(i < 5) 
      alert("item=" + items[i].id);  
    $scope.items.push({id: i}); 
    } 

}); 
}; 
    $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); 
     } 
    }); 
};

}）;

我从一个例子中复制了大部分代码，我看不出为什么它不起作用。我通过提醒响应确保数据从我的http获取。所以数据回来了，但网页上没有显示任何内容。任何帮助表示赞赏。

我再次显示我的代码，看起来我的程序逻辑从未到达最后。

function Scroller($scope, $http, $q, $timeout) { 

    $scope.items = []; 

$scope.loadMore = function() {  

    var url = "/admin/getusers?type=" + "today"; 
    var d = $q.defer(); 
    $http({ 
     'url': url, 
     'method': 'GET' 
    }) 
     .success(function (data) { 

    var items = data.response;  
    for (var i = 0; i < items.length; i++) {  
    $scope.items.push({username: items[i].username}); 
    } 
    d.resolve($scope.items);  
    alert("end loop"); 

} 
); 
    alert("d.promise"); 
return d.promise;  
}; 
    alert("end of loadMore"); 

    $scope.loadMore(); 
}

'd.promise'的提示首先显示。然后显示“结束循环”的提示。 “loadMore结束”警报不会显示。有人可以显示我缺少什么代码来使这些数据显示在我的网页中吗？我正在收回数据。

来源

2014-02-14 Dave

看看http://stackoverflow.com/questions/13755120/infinite-scroll-from-the-top-reverse-in-angularjs?rq=1 –

我看过你提到过的问题，我做了一些改变，例如返回承诺，$超时等等，但即使数据回来，它仍然不会填充我的网页。另外，什么是loadMore.then函数（）？ – Dave

你应该使用ngInfiniteScroll，看看这个例子：http://4dev.tech/2015/08/tutorial-implementing-infinite-scroll-with-angularjs-and-nginfinitescroll/ –

答案是对The Promise API

创建一个延迟的实例，可以通过调用deferred.promise进行检索，当一个新的承诺实例被创建。

promise对象的作用是允许感兴趣的对象在完成时访问延迟任务的结果。

方法

然后（successCallback，errorCallback，notifyCallback） - 无论何时承诺是或将得到解决或拒绝，然后异步只要结果是可调用的成功或错误回调之一。回调被调用一个参数：结果或拒绝原因。另外，在承诺被解决或被拒绝之前，通知回叫可以被称为零次或多次以提供进度指示。

此方法返回一个新的承诺，通过successCallback，errorCallback的返回值解决或拒绝该承诺。它还通过notifyCallback方法的返回值进行通知。该承诺无法通过notifyCallback方法解决或拒绝。

赶上（errorCallback） - 速记promise.then（NULL，errorCallback）

最后（回调） - 允许你观察或者履行或拒绝承诺，但没有改变终值这么做。这对于释放资源或做一些清理工作是有用的，无论承诺是否被拒绝或解决，都需要进行清理。有关更多信息，请参阅完整规范。

由于最终是JavaScript中的保留字，并且ES3不支持保留的关键字作为属性名称，所以您需要调用像'promise'这样的方法来使您的代码与IE8兼容。

来源

2014-02-14 19:48:49

我加了这段代码：\t return d .promise \t \t }; var promise = Scroller（$ scope，$ http，$ q，$ timeout）; （函数（消息））{ \t alert（“message =”+ message）; }）;现在我得到错误：RangeError：超出最大调用堆栈大小。我如何解决这个错误？ – Dave

别管我最后的评论。我仍然试图围绕诺言功能。我希望我能找到一个很好的例子。我正在更新items数组，没有任何东西回到网页。我想我不明白为什么在互联网上的例子不显示如何使用承诺。 – Dave

这个问题是因为在父div上没有固定的高度而id="fixed"？我观察到你的代码只在与id="fixed"这个div有固定高度的情况下才起作用。

来源

2014-04-21 12:41:33 Shreerang

angularjs无限滚动不起作用

回答

相关问题