路过一个承诺到ngRepeatngRepeat

2023-09-13 03:25:33 作者:爱走就走@

所以,我看到他们在那里传递到推迟一个ngRepeat的angualar例子,它工作得很好。出于某种原因,当我成立这个例子中这是行不通的。谁能告诉我为什么吗?如果分配的数据,而推迟正常工作,即 $ scope.objects = {[ID:1} ...] 结果非常感谢结果 小提琴这里

 <!DOCTYPE HTML>< HTML NG-应用=应用程序>< HEAD>< /头><身体GT;  < testlist />  <脚本SRC =/ lib目录/角/ angular.js>< / SCRIPT>  <脚本>   VAR应用= angular.module('应用',[]);   app.factory('的DataService',函数($ Q){     返回{       的getData:功能(){         变种推迟= $ q.defer();         的setTimeout(函数(){           deferred.resolve([{编号:1},{ID:2},{ID:3},{ID:4}]);         },0);         返回deferred.promise;       }     };   });   app.directive('testlist',['的DataService',函数(DataService的){     返回{        限制:'E',        更换:真实,        范围 : {},        模板:'< D​​IV NG重复=数据对象> {{检查(数据)}} {{data.id}}< / DIV>,        控制器:函数($范围){          $ scope.objects = [{编号:1},{ID:2},{ID:3},{ID:4}];          $ scope.inspect =功能(OBJ){            的console.log(OBJ)          }        }      }    }]);  < / SCRIPT>< /身体GT;< / HTML> 

解决方案

我不认为你可以使用承诺直接对象,你应该使用然后作为回调在文档说。

这意味着你的

  $ scope.objects = dataService.getData(); 
滚滚红尘,只为守那一世的诺言...

而应该是这样的。

  dataService.getData()。然后(功能(数据){    $ scope.objects =数据;}); 

否则,你的 $ scope.objects 将包含承诺对象,而不是要传递到解决数据

这里请参阅更新的小提琴。

So, I saw an example where they were passing an angualar deferred into ngRepeat and it worked fine. For some reason when I set up this example it doesn't work. Can anyone tell me why? If you assign the data without the deferred it works fine i.e. $scope.objects = [{id:1}...] Many thanks 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>

解决方案

I don't think you can use the promise objects directly, you should use the then callbacks as stated in the documentation.

This means that your

$scope.objects = dataService.getData();

Should instead be something like

dataService.getData().then(function(data) {
    $scope.objects = data;
});

Otherwise, your $scope.objects will contain the promise object, and not the data you are passing to resolve.

See the updated fiddle here.