複数レベルの指示文で "$ parent"

Question

a working codeを理解しようとしています。 GUIでname:value pairsを1つずつ追加することで、非常に簡単なjsonデータを構築できます。私を困惑何

は他ではハイライト部でng-model="$parent.keyName"だけでなく、$parent.valueType、ng-model="$parent.valueName"です：カスタムディレクティブとそのリンク機能により、それが下の画像の右側などのHTMLテンプレートを作成します部。

1）$parentは（コードまたは上の画像の例で）何を参照していますか？

2）$parentまたは$parent.keyNameという値をコンソールに表示する方法や、プログラムに何か（たとえば、alert）を追加する方法はありますか？

Answer 1

1）$parentは（任意のスコープの）親スコープを指します。すべてのスコープには、トップレベルのスコープである$rootScope以外の親があります。それらは、ng-controllerを含むがこれに限定されない任意の角のng-*指令によって作成することができる。

一般に、$parentは、の即時親スコープを参照するため、悪い習慣とみなされますが、これは変更される可能性があります。スコープ階層が変更された場合（例えば、ng-*ディレクティブをカスタムディレクティブテンプレートに保持されているhtml要素に追加することによって可能になる場合）、階層は壊れてしまう可能性があります。$parentは以前と同じスコープを参照しません。

2）はい、あなたはです。 Chromeデベロッパーツールでは、Right Click > Inspect Element（スクリーンショットの場合）の要素を選択します。そして、あなたはその要素が強調されたまま、コンソールタブと種類に行けば：選択された要素が常駐することをスコープを返し

angular.element($0).scope() 

次に、あなたが入力した場合：

angular.element($0).scope().$parent() 

は親を返すこと。選択された要素が常駐することをスコープのスコープと、それはあなたの価値がある何のためにも行うことができます。

angular.element($0).scope().$parent().$parent() 

とスコープの階層を続けます。

AngularJS Batarangクロムエクステンションを使用すると、Chromeデベロッパーツールでスコープを見ることができます。

Answer 2

この$ parentは何を参照していますか？

親は親コントローラの範囲を指します。あなたの質問の画像は明確な画像を与えていないので、例を追加します。

<div ng-controller="EditorController"> 
    <div ng-controller="ChildEditorController"> 
     .... 
    </div> 
</div> 

は、あなたが（ここで親コントローラである）あなたのEditorControllerでeditorsList（配列）と呼ばれる性質を持っていると仮定し、あなたはあなたがあなたの親のスコープにアクセスすることができます

<div ng-controller="EditorController"> 
    <div ng-controller="ChildEditorController"> 
     Editors Count: {{$parent.editorsList.length}} 
    </div> 
</div> 

ような何かを行うことができます$親と一緒に。