javascript - AngularJS 通过模板在组件之间进行通信(带有 promise )

Question

我正在开发一个包含 Actor 列表的应用程序。后端有具有多对多关系的标签和 Actor 。

我有 2 个组件，我想通过模板在它们之间传递 Unresolved promise 。

这是 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, "name": "Oscar Winner", "actors": [ 664, 668, 670, 673, 678, 696 ] }

我还有一个 Actor 列表组件，负责从后端检索 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 组件。

actor-tag-detail.template.html:

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

我想要实现的是访问 actor-list 组件中检索到的 JSON 数据。但是，当我尝试在 actor-list.component 中进行 alert(self.pk) 时，我收到了“ Unresolved 对象错误”，而不是所需的结果。这种情况正在发生因为当 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();  
        }
    }
}