テンプレートを使ったコンポーネント間のAngularJS通信（約束付き）

Question

私は俳優のリストを持っているアプリを開発中です。バックエンドには多対多の関係を持つタグとアクターがあります。

私は2つのコンポーネントを持っています。私は渡す必要がありますし、テンプレートを介してそれらの間の約束を解決します。

これはアクタータグディテール成分である：

{ "ID"：

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を返します。 37、 "名前"： "オスカー勝者"、 "アクター"：[ 664、 668、 670、 673、 678、]}

私はまた、バックエンドから俳優のリストを取得するための責任がある俳優・リスト・コンポーネントがあります。私は俳優・タグの詳細については、テンプレートでは

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-listコンポーネントに属性を渡そうとしています。

俳優タグ-detail.template.html：私が達成しようとしている何

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

は、俳優のリストコンポーネントで取得したJSONデータへのアクセス権を持つことです。しかし、​​が実行されているときに、データがバックエンドから取得されていないため、アクターlist.componentの​​を試行したときに、目的の結果の代わりに '未解決オブジェクトエラー'が表示されます。 状況を改善する方法がわかりません。 約束が解決され、データがバックエンドから受信されるまで、実行を待つ受信コンポーネントを指定する方法はありますか？

やっぱり間違っているのですが、コンポーネント間でこの情報を渡す方が良いでしょうか？

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(); 
     } 
    } 
}