AngularJS 1.5の子コンポーネントの親コンポーネントプロパティにアクセスするにはどうすればよいですか？

Question

親と子のコンポーネントがあり、<ng-if>でisTrueプロパティ値を使用して非表示にする要素があります。しかし、現在、同じことをするのに苦労している。

正確なシナリオ：

私は親コンポーネントコントローラの「isTrue」と呼ばれる性質を持っており、isTrue: '<'を使用して、子に渡します。さて、子コンポーネントでは、私はそれを行うには問題がないisTrueプロパティ値を使用して何かを非表示にする必要があります。

今すぐ。再び同じサイクルが繰り返されますが、今度はもう一度isTrueCheck()を使用して親コンポーネントのisTrueをハードリセットし、再び子コンポーネントに送り返します。現在、isTrueはtrueに設定し、子コンポーネントに送信する必要があります。

夏らしい：私はisTrueCheck（）を呼び出すたび

は、同様に、私は本当の 'isTrue' を設定し、子コンポーネントに送信します。

私は$onInit()に設定しようとしました。

親コントローラ：

this.isTrue; 
this.isTrueCHeck = function(){ 
    isTrue = true; 
}; 

子コントローラ：

isTrue: '<' 
if (isTrue){ 
    isTrue= false; 
} 

子供HTML /テンプレート

<div ng-click="isTrueCheck"></div>// Calling to reset `isTrue` property 
<div ng-if="$ctrl.isTrue">ele1</div> 
<div ng-if="!$ctrl.isTrue">ele2</div> 

親コントローラとハードリセットをtrueにして、同じ手順を実行したいと思います。

Answer 1

あなたはこのような何か行うことができます下のようなあなたのHTMLの場合：

<div ng-controller="ParentCtrl"> 
    <div ng-controller="ChildCtrl"> 
    </div> 
</div> 

を

function ChildCtrl($scope) { 
    $scope.isTrue= $scope.$parent.isTrue; 
} 

を次のようにあなたがあなたの親コントローラにアクセスしたい場合、あなたは親スコープにアクセスすることができますあなたはこのような何かをしなければならないことを見てください：

<div ng-if="$parent.isTrue">ele1</div> 
<div ng-if="!$parent.isTrue">ele2</div> 

Answer 2

私はあなたのprobleを理解しているm。

1. あなたは、変数を持つ親コンポーネントといくつかの子供たち
2. を持っている「isTrueの親に設定し、子供たちにそれを伝播したい： 私は私が言う場合は右です。親が 'isTrue'を変更すると、子供の中でそれをトリガーします。

まあ、そうだとすれば、子供たちにあなたの子供に$のonChangeメソッドを実装する必要があります。

isTrue: '<' 

1は、上記のあなたの変数は、親から渡されます。

// 
// React to changes of *one-way bindings* (< and @) of a component 
// see http://blog.thoughtram.io/angularjs/2016/03/29/exploring-angular-1.5-lifecycle-hooks.html 
// see https://toddmotto.com/angular-1-5-lifecycle-hooks#onchanges 
ctrl.$onChanges = function (changesObj) { 
    // if isTrue changes, do something 
    if (changesObj.isTrue && changesObj.isTrue.currentValue) { 
     // do something... 
     // .... 
    } 
} 

参照：http://blog.thoughtram.io/angularjs/2016/03/29/exploring-angular-1.5-lifecycle-hooks.html

と

https://toddmotto.com/angular-1-5-lifecycle-hooks#onchanges