Question

我正在尝试使用au组件来显示我的数据。

在我的模板中，我有：

{{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))
}

但是在chrome控制台中，它告诉我$ scope。$ ctrl.data是未定义的，错误＆＃34; TypeError：无法读取属性＆＃39; nbElements＆＃39;未定义的

如果我这样做的话的console.log（$ $范围CTRL）;

我在Chrome控制台中有这个：

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

Chrome告诉我myCotroller已经过评估，所以我认为myCotroller在构建我的属性之前没有等待数据。我做错了什么？

Answer 1

问题解决了在我的模板中添加ng-if条件

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

感谢您的帮助

角度1.5分量等待数据

1 个答案: