Question

我试图在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>

以下是我的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 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();
 }

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

Answer 1

答案在The Promise API

上

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

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

方法

然后（successCallback，errorCallback，notifyCallback） - 无论何时或将要解析或拒绝承诺，只要结果可用，就会异步调用其中一个成功或错误回调。使用单个参数调用回调：结果或拒绝原因。此外，在解决或拒绝承诺之前，可以将通知回调调用零次或多次以提供进度指示。

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

catch（errorCallback） - promise.then（null，errorCallback）的简写

finally（回调） - 允许您观察承诺的履行或拒绝，但是在不修改最终值的情况下这样做。无论承诺被拒绝还是已解决，这对于释放资源或进行必要的清理都非常有用。有关详细信息，请参阅完整规范。

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

Answer 2

这个问题是因为在id="fixed"的父div上没有固定的高度吗？我发现只有当id="fixed"的div具有固定高度时，您的代码才有效。

angularjs无限滚动不工作

2 个答案: