2016-11-07 2 views
1

Я пытаюсь использовать компонент 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); 
    } 

})(); 

Это код не работает. Но если я заменил $ scope.myDatas ожидаемым JSON, он будет работать.

здесь код 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, но как я могу это сделать?

Благодаря

EDIT вот что я сделал. я заменил

$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 »неопределенного

если я делаю console.log ($ scope. $ Ctrl);

у меня есть это в хромированной консоли:

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

Chrome сказать мне myCotroller оценивали, так что я думаю, что myCotroller не ждет данных, прежде чем строить свои свойства. Что я делаю не так ?

+0

Что 'TestFactory'? Это запрос async? Если это так, то это ваша проблема. –

+0

Я добавил код завода. Да, он делает асинхронный запрос –

+0

Поскольку вы создаете компонент (в отличие от директивы), я бы тоже привык использовать крючок жизненного цикла 'onInit' для контроллера. Когда конструктор вызывается на контроллере, он не был инициализирован дополнительными аспектами области. – jusopi

ответ

4

проблема решена добавляя нг-если условие в шаблоне

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

спасибо за вашу помощь

Смежные вопросы