「 AngularJSコントローラーではどのようthis
に機能しますか?」$scope
短い答え:
this
- コントローラーコンストラクター関数が呼び出されると、
this
はコントローラーになります。
$scope
オブジェクトに定義されたthis
関数が呼び出されたとき、は「関数が呼び出されたときに有効だったスコープ」です。これは$scope
、関数が定義されているものである場合もあれば、そうでない場合もあります。したがって、関数内で、同じthis
で$scope
はない可能性があります。
$scope
- すべてのコントローラーには、関連付けられた
$scope
オブジェクトがあります。
- コントローラー(コンストラクター)関数は、関連するモデルのプロパティと関数/動作を設定する役割を果たします
$scope
。
$scope
このオブジェクト(およびプロトタイプの継承が機能している場合は親スコープオブジェクト)で定義されたメソッドのみが、HTML/ビューからアクセスできます。たとえば、from ng-click
、filtersなど。
長い答え:
コントローラー関数はJavaScriptコンストラクター関数です。コンストラクター関数が実行されるとき(たとえば、ビューがロードされるとき)、this
(つまり、「関数コンテキスト」)がコントローラーオブジェクトに設定されます。したがって、「タブ」コントローラーコンストラクター関数では、addPane関数が作成されると
this.addPane = function(pane) { ... }
$ scopeではなく、コントローラーオブジェクトに作成されます。ビューはaddPane関数を見ることができません-ビューは$scopeで定義された関数にのみアクセスできます。つまり、HTMLでは、これは機能しません。
<a ng-click="addPane(newPane)">won't work</a>
「tabs」コントローラーコンストラクター関数が実行されると、次のようになります。
黒い破線は、プロトタイプの継承を示します。分離スコープは、プロトタイプからスコープを継承します。(通常、HTMLでディレクティブが検出されたスコープからは継承されません。)
ここで、paneディレクティブのリンク関数は、tabsディレクティブと通信する必要があります(つまり、タブの分離$ scopeに何らかの影響を与える必要があることを意味します)。イベントを使用することもできますが、別のメカニズムは、ペインディレクティブrequire
をタブコントローラーにすることです。require
(タブ$ scopeへのペインディレクティブのメカニズムはないようです。)
だから、これは疑問を投げかけます:タブコントローラーにしかアクセスできない場合、タブ分離$ scopeにアクセスするにはどうすればよいですか(これは私たちが本当に望んでいることです)?
さて、赤い点線が答えです。addPane()関数の「スコープ」(ここではJavaScriptの関数スコープ/クロージャを参照しています)により、関数はタブの分離$scopeにアクセスできます。つまり、addPane()が定義されたときに作成されたクロージャのため、addPane()は上の図の「タブIsolateScope」にアクセスできます。(代わりに、タブ$ scopeオブジェクトでaddPane()を定義した場合、ペインディレクティブはこの関数にアクセスできないため、タブ$ scopeと通信する方法がありません。)
あなたの質問の他の部分に答えるにはhow does $scope work in controllers?
::
$ scopeで定義された関数内で、this
「関数が呼び出された場所/ときに有効な$scope」に設定されます。次のHTMLがあるとします。
<div ng-controller="ParentCtrl">
<a ng-click="logThisAndScope()">log "this" and $scope</a> - parent scope
<div ng-controller="ChildCtrl">
<a ng-click="logThisAndScope()">log "this" and $scope</a> - child scope
</div>
</div>
そしてParentCtrl
(唯一の)持っている
$scope.logThisAndScope = function() {
console.log(this, $scope)
}
最初のリンクをクリックすると、「関数が呼び出されたときに有効だったスコープ」がに関連付けられたスコープであるため、this
と$scope
は同じであることが示されます。ParentCtrl
2番目のリンクをクリックすると、「関数が呼び出されたときに有効だったスコープ」がに関連付けられたスコープであるため、同じでthis
は$scope
なく表示されます。したがって、ここでは、は'sに設定されます。メソッド内には、まだの$scopeがあります。ChildCtrl
this
ChildCtrl
$scope
$scope
ParentCtrl
フィドル
$ scopeで定義された関数の内部では使用しないようにしていますthis
。特に、ng-repeat、ng-include、ng-switch、およびディレクティブがすべて独自の子スコープを作成できることを考えると、影響を受ける$scopeが混乱するためです。