角1.5组件等待数据

问题描述：

我想使用au组件来显示我的数据。角1.5组件等待数据

在我的模板，我有：

{{myDatas}} 
<my-cmp data="myDatas"></my-cmp>

我显示{{myDatas}}，以确保有数据

这里是我为我的组件代码：

(function() { 
'use strict'; 

angular 
    .module('myApp.test') 
    .controller('TestController', TestController) 
    .component('myCmp', { 
     templateUrl: 'myTemplate.html', 
     bindings: { 
      data: '=' 
     }, 
     controller: myController 
    }); 

    function TestController($scope, $stateParams, ResidencesFactory) { 
     $scope.myDatas = TestFactory.read({id: $id}); 
    } 


    function myController($scope) { 
     console.log($scope.$ctrl.data.nbElements); 
    } 

})();

这代码不起作用。但是，如果我用预期的JSON替换$ scope.myDatas，它就可以工作。

这里是TestFactory中的代码：）

(function() { 
'use strict'; 

angular 
    .module('core.test') 
    .factory('TestFactory', TestFactory); 

function TestFactory($resource) { 
    return $resource(
     '/api/test/:id', 
     { 
      id: '@id' 
     }, 
     { 
      query: { 
       method: 'GET', 
       isArray: true 
      }, 
      read: { 
       method: 'GET' 
      } 
     } 
    ); 
}

}）（;

所以我想我必须等待我的TestFactory的$资源的数据，但我怎么能做到这一点？

感谢

编辑这里是我做的。我换成

$scope.myDatas = TestFactory.read({id: $id});

与

TestFactory.read({id: $id}).$promise.then(function(response){ 
    $scope.myDatas = response; 
});

而在我的组件控制器，我有$ OnInit的是这样的：

this.$onInit = function() { 
    console.log($scope.$ctrl.data); 
    $scope.percent = parseFloat(($scope.$ctrl.data.nbElements/ $scope.$ctrl.data.nbAllElements * 100).toFixed(2)) 
}

但在铬控制台，它告诉我，$范围$ ctrl.data未定义，并且错误“TypeError：无法读取属性'nbElements'的undefined

如果我做 console.log（$ scope。$ ctrl）;

我有这样的铬控制台：

>myController 
    >$onInit: function() 
    >data: m 
    >__proto__:Object

铬告诉我myCotroller评价，所以我觉得myCotroller建设我的属性之前没有等待数据。我究竟做错了什么？

有什么'TestFactory'？它是一个“异步”请求？如果是这样，这是你的问题。 –

我添加了工厂代码。是的，它会发出异步请求 –

由于您正在制作组件（而不是指令），因此我还习惯使用控制器的'$ onInit'生命周期挂钩。在控制器上调用构造函数时，尚未使用其他范围方面进行初始化。 – jusopi

答

问题解决了我的模板添加到NG-if条件

<my-cmp ng-if="myDatas" data="myDatas"></my-cmp>

感谢您的帮助

角1.5组件等待数据

相关推荐