AngularJS ui-utils ui.滚动条不显示结果

AngularJS ui-utils ui.scroll doesn't display results

本文关键字:显示 结果 滚动条 ui-utils ui AngularJS      更新时间:2023-09-26

我有一个使用AngularJS的rails 4应用程序。我试图使用ui创建一个原型。从angular的ui-utils模块中滚动指令。当我使用ng-repeat时,我的rails API工作得很好,但是当我尝试使用ng-scroll时,我的viewport从来没有任何数据。注意:我在应用程序的其他部分使用jquery,所以我没有使用任何jquery的东西。

视图:(我跳过所有的头的东西-但知道,css/jscript是包括在内)

<html ng-app="Raffler">
<body>
<div ng-controller="ItemCtrl">
    <div ng-scroll-viewport style="height:240px;">
        <ul>
            <li ng-scroll="entry in datasource">
                {{entry.name}}              
            </li>           
        </ul>
    </div>
</div> </body> </html>

控制器:(我跳过所有的应用程序包含,但知道依赖项被注入)

angular.module("eli.Controllers").controller("ItemCtrl", 
    ["$scope", "Item", function ($scope, Item) {
    $scope.items = Item.query();
  $scope.datasource = {
    get: function(index, count, success) {
      // ensure we don't overrun the bounds of the data array
      var start = Math.max(0, index);
      var end = Math.min(index + count, $scope.items.length);
      var results = [];
      for (var i = start; i < end; i++) {
        results.push($scope.items[i]);          
      }
      success(results);      
    },
    revision: function() {
        return $scope.items;
    }
  };
}
]);

所以我猜你这里的问题是,查询没有返回时,get函数在您的数据源上调用。

您需要在get函数中验证数据是否准备就绪。我不确定查询调用的另一边是什么,但如果有一些方法可以从那个调用中获得一个承诺,那么你可以在get中使用它在回调完成时执行。