2016-07-17 13 views
0

以下の順序で3つのコンポーネントがあります。1つの親コンポーネントと2つの子コンポーネントがあります。私は、親コンポーネント内で、2つの子コンポーネントのいずれかから起動することによって、関数を実行する必要があります。AngularJs 1.5 - 親コンポーネント経由で2つのコンポーネント間で通信することができません

子コンポーネントの両方jsファイルには、次のようになります。

angular 
    .module('app) 
    .component(childComponent1, { 
     bindings: { 
      switch: '&' 
     }, 
     templateUrl: '...', 
     controller: ['$scope', function ($scope) {  
     }] 
    }); 

angular 
    .module('app) 
    .component(childComponent2, { 
     bindings: { 
      switch: '&' 
     }, 
     templateUrl: '...', 
     controller: ['$scope', function ($scope) {  
     }] 
    }); 

親コンポーネント:

angular 
    .module('app) 
    .component(parentComponent, { 
     bindings: { 
      switch: '&' 
     }, 
     templateUrl: '...', 
     controller: ['$scope', function ($scope) { 
      this.switch = function(){ 
       'some code...' 
      } 
     }] 
    }); 

各子コンポーネントテンプレートにそうように、親機能switchを実行する必要があり、ボタンがあります:

<button class="btn" ng-click="$ctrl.switch()">Back</button> 

コードには含まれていません。仕事、アドバイスは?

答えて

1

バインディングを使用するのではなく、親コンポーネントコントローラにアクセスするために、子で必要なパラメータを使用してみてください。

require: { 
    parentCtrl: '^parentComponent' 
}, 

は、このアプローチの例https://plnkr.co/edit/fPGuZzIqNbfXeBGXve4J?p=previewを見てください。

また、.componentを使用してAngular 1.5をAngular 2.0にアップグレードしやすくするには、コンポーネントコントローラで$ scopeを使用しないようにする必要があります。