クリック時に親要素を非表示にする

Question

角度のあるJSを学習すると、要素をクリックすると親要素が隠れる単純な機能が試されます。

マイコード：

<div class="form-section" ng-init="visible = true" ng-show="visible"> 
    <a class="next" ng-click="$parent.visible = false">NEXT</a> 
</div> 

私は<a>タグをクリックすると、しかし、何も起こりません。

私はこのフィドルに私のコードをベース：http://jsfiddle.net/oxda3aes/

Answer 1

あなたは何をやっていることはvisibleと呼ばれる範囲の変数を作成し、trueに設定されて$parent

を必要としません。 変数を変更するために必要なのは、visible $parent isn't referencing a parent node, it's referencing a parent scopeです。

<div class="form-section" ng-init="visible = true" ng-show="visible"> 
    <a class="next" ng-click="visible = false">NEXT</a> 
</div> 

http://jsfiddle.net/oxda3aes/25/

これは、あなたが少し良く何が起こっているか見るのを助けるかもしれない： http://jsfiddle.net/oxda3aes/26/

ここで私は、コントローラに見える変数を宣言します。どちらも同じタスクを達成します。

そして、ここで私が同じことをやっクリック時に呼び出されるスコープの機能を持っている：角度で http://jsfiddle.net/oxda3aes/27/

Answer 2

$親はHTML構造内の親要素が、ネストされたスコープの関係を意味するものではありません。前述の例では、ng-repeatは反復ごとに子スコープを作成し、この子スコープからの$ parentは親スコープを指します。あなたのケースでは、両方のHTML要素が同じスコープに属しているので、既に答えられているように、あなたの場合は$ parentを使用しないでください。むしろ、その後

角度に親の子スコープの相互作用を扱う場合、それはあなたのNG-モデル用のオブジェクトを使用することが常にあり、プリミティブ（ngModel =「obj.property」だけではなくngModel =「プロパティ」） 、角度の範囲についての非常に良い記事を参照してくださいhttps://github.com/angular/angular.js/wiki/Understanding-Scopes