Question

我正在开发一个有演员列表的应用。后端有许多关系的标签和演员。

我有2个组件，我想通过模板传递它们之间的未解决的承诺。

这是actor-tag-detail组件：

angular.module('actorTagDetail').component('actorTagDetail', {
    templateUrl: 'static/partials/actor-tag-detail/actor-tag-detail.template.html',
    controller: ['$routeParams', 'ActorTag',
        function ActorTagDetailController($routeParams, ActorTag) {


            var self = this; 
            self.actorTag = ActorTag.get({actorTagId: $routeParams.actorTagId})

        }
    ]
});

actorTag从后端返回一个ActorTag对象的JSON，如下所示：

{ “id”：37， “名字”：“奥斯卡奖得主”， “演员”：[ 664， 668， 670， 673， 678， 696 ]}

我还有一个actor-list组件，负责从后端检索一个actor列表：

angular.module('actorList').component('actorList', {
    templateUrl: 'static/partials/actor-list/actor-list.template.html',
    bindings: {
        pk: '='
    },
    controller: ['Actor',
        function ActorListController(Actor) {
            var self = this;
            alert(self.pk)
            self.actors = Actor.query();  
            self.orderProp = 'name';
        }
    ]
});

在actor-tag-details的模板中，我试图将一个属性传递给actor-list组件。

演员标签的detail.template.html：

<actor-list pk="$ctrl.actorTag.actors"></actor-list>

我想要实现的是访问actor-list组件中检索到的JSON数据。但是当我在actor-list.component中尝试alert(self.pk)时，我得到一个'未解析的对象错误'而不是所需的结果。这是因为当alert(self.pk)运行时，尚未从后端检索数据。我不知道如何纠正这种情况。有没有办法在接收组件中指定等待执行，直到解析了promise并从后端接收数据？

或者，我是否完全错误，并且有更好的方法在组件之间传递此信息？

Answer 1

使用观察者收听对象更改：

function ActorListController($scope, Actor) {
    var self = this;
    $scope.$watch(function() {
        return self.pk;
    }, function(newValue, oldValue) {
        if(angular.isObject(newValue) {
            //alert(self.pk)
            self.actors = Actor.query();  
        }
    }
}

组件之间通过模板进行AngularJS通信（带有承诺）

1 个答案: