Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/82.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript angularjs无限滚动不工作_Javascript_Html_Angularjs_Infinite Scroll - Fatal编程技术网

Javascript angularjs无限滚动不工作

Javascript angularjs无限滚动不工作,javascript,html,angularjs,infinite-scroll,Javascript,Html,Angularjs,Infinite Scroll,我试图在angularjs中实现无限滚动,但没有运气。下面是我的html代码: <div ng-app='herbivore' ng-controller='Scroller'> <div id="fixed" when-scrolled="loadMore()"> <div ng-repeat='item in items'>

我试图在angularjs中实现无限滚动,但没有运气。下面是我的html代码:

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

我从一个例子中复制了大部分代码,但我不明白为什么它不起作用。我通过提醒响应来确保数据从http get返回。因此,数据正在返回,但网页上没有显示任何内容。感谢您的帮助

我再次展示我的代码,似乎我的程序逻辑永远不会结束

  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();
 }
函数滚动条($scope、$http、$q、$timeout){
$scope.items=[];
$scope.loadMore=function(){
var url=“/admin/getusers?type=“+”今天”;
var d=$q.defer();
$http({
“url”:url,
'method':'GET'
})
.成功(功能(数据){
var项目=数据。响应;
对于(var i=0;i
“d.promise”的警报首先显示。然后,下一步显示“结束循环”警报。“loadMore结束”警报从不显示。有人能告诉我我缺少什么代码来让这些数据显示在我的网页上吗?我正在取回数据。

答案在

创建延迟实例时会创建一个新的promise实例,可以通过调用deferred.promise检索该实例

promise对象的目的是允许相关方在延迟任务完成时访问其结果

方法

然后(successCallback、errorCallback、notifyCallback)–无论承诺何时或将何时解决或拒绝,只要结果可用,就异步调用其中一个成功或错误回调。调用回调时只需一个参数:结果或拒绝原因。此外,在承诺被解决或拒绝之前,notify回调可能被调用零次或多次以提供进度指示

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

catch(errorCallback)–promise的简写。然后(null,errorCallback)

最后(回调)–允许您观察承诺的履行或拒绝,但不修改最终值。无论承诺是否被拒绝或解决,这都有助于释放资源或进行一些需要进行的清理。有关更多信息,请参阅完整规范


因为finally在JavaScript中是一个保留字,ES3不支持保留关键字作为属性名,所以您需要调用类似promise'finally'的方法来使代码IE8兼容。

这是因为父div上没有固定高度的
id=“fixed”
?我观察到,只有当这个具有
id=“fixed”
的div具有固定高度时,您的代码才起作用。

看一看,我确实看了您提到的问题,并做了一些更改,如return promise、$timeout等。但即使返回数据,它仍然不会填充我的网页。另外,什么是loadMore.then function()?您应该使用ngInfiniteScroll,看看这个示例:我添加了以下代码:returnd.promise};var promise=Scroller($scope、$http、$q、$timeout);然后(函数(消息){alert(“message=“+message”);});现在我得到一个错误:RangeError:超过了最大调用堆栈大小。如何解决此错误?请不要介意我最后的评论。我仍在试图把我的头绕在承诺函数上。我希望我能找到一个好的例子。我正在更新items数组,但没有任何内容返回到网页。我想我不明白为什么互联网上的例子没有说明如何使用承诺。
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);
        }
    });
};
  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();
 }