angularjs - 将 promise 传递给ngRepeat

标签 angularjs

因此,我看到了一个示例,其中他们将延迟的angualar传递到ngRepeat中,并且效果很好。由于某些原因,当我设置此示例时,它不起作用。谁能告诉我为什么?如果您分配的数据没有延迟,则可以正常工作,即$scope.objects = [{id:1}...]非常感谢
Fiddle here

<!doctype html>
<html ng-app="app">
<head>
</head>
<body>

  <testlist/>

  <script src="/lib/angular/angular.js"></script>
  <script>
   var app = angular.module('app', []);

   app.factory('dataService', function ($q) {
     return {
       getData : function () {
         var deferred = $q.defer();
         setTimeout(function () {
           deferred.resolve([{id:1},{id:2},{id:3},{id:4}]);
         },0);
         return deferred.promise;
       }
     };
   });


   app.directive('testlist', ['dataService', function(dataService) {
     return {
        restrict: 'E',
        replace: true,
        scope : {},
        template: '<div ng-repeat="data in objects">{{inspect(data)}}{{data.id}}</div>',
        controller: function($scope) {
          $scope.objects = [{id:1},{id:2},{id:3},{id:4}];
          $scope.inspect = function (obj) {
            console.log(obj)
          }
        }
      }
    }]);

  </script>
</body>
</html>

最佳答案

我认为您不能直接使用Promise对象,应该使用documentation中所述的then回调。

这意味着您

$scope.objects = dataService.getData();

而是应该像
dataService.getData().then(function(data) {
    $scope.objects = data;
});

否则,您的$scope.objects将包含promise对象,而不包含要传递给resolve的数据。

请参阅更新的 fiddle here

关于angularjs - 将 promise 传递给ngRepeat,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21337666/

相关文章:

javascript - AngularJS:使用 ng-show/hide 动态维护下拉列表的 3 种状态(进行中、成功、错误)?

javascript - 如何通过路由器 Controller 更改 ngclass?

javascript - Angular 检查过滤器返回的内容

javascript - 在 Angular.js 中绑定(bind)服务变量

javascript - 如何在 Angular ng-repeat 中按类别键过滤数组中的对象

angularjs - 如何将我的 AngularJS 常量提取到 Typescript 函数中?

javascript - AngularJS:基于 Google Maps API 的单元测试应用程序

ruby-on-rails - Angular $http 和 Rails 4 参数

javascript - Typeahead-addresspicker - JS 支持

javascript - 在较低级别冗余加载 Angular 模块?