AngularJS 组件之间通过模板进行通信（使用 promise）

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 returns JSON 如下所示：

{ "id": 37, "name": "Oscar Winner", "actors": [ 664, 668, 670, 673, 678, 696 ] }

我还有一个演员列表组件，负责从后端检索演员列表：

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>

我想要实现的是访问演员列表组件中检索到的 JSON 数据。但是，当我尝试 alert(self.pk) in actor-list.component.This 时，我得到了一个“未解决的对象错误”而不是预期的结果，因为当 alert(self.pk) 运行时，尚未从后端检索数据。我不知道如何补救这种情况。有没有办法在接收组件中指定等待执行，直到承诺得到解决并从后端接收到数据？

或者，我做的完全错了，有更好的方法在组件之间传递这些信息吗？

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 组件之间通过模板进行通信（使用 promise）

AngularJS communication between components through a template (with a promise)

javascript

thread-synchronization

angularjs

angular-promise