AnglarJSグローバルscopeとIsolate scopeは通信します.
6246 ワード
プロジェクト開発時、グローバルscopeとdirectiveローカルscopeの使用範囲がはっきりしていません.グローバルscopeとdirectiveローカルscopeの通信は完全に把握できていません.ここではグローバルscopeとdirectiveローカルscopeの使用をまとめます.
一、scopeスコープ
1、AnglarJSでは、サブスコープは通常、JavaScriptプロトタイプ継承機構を通じてその親の役割領域の属性と方法を継承します.しかし、例外があります.directiveでscope:{…}を使用して、このように作成された作用域は独立した「Isolate」の役割領域であり、父の役割領域もありますが、父の役割領域はそのプロトタイプチェーン上になく、父の役割領域をプロトタイプで継承することはありません.このように作用領域を定義することは、通常、多重化可能なdirectiveコンポーネントを構築するために用いられる.
2、もし私たちがサブスコープの中で父の役割領域で定義されている属性を訪問した場合、JavaScriptはまずサブスコープの中でこの属性を探していますが、原型チェーン上の父の役割領域から探すことができませんでした.もしまだ見つかっていなかったら、もう一級のプロトタイプチェーンの父の役割領域に探すことができます.AnglarJSでは、スコープの先端は$rootScopeで、JavaScriptは$root Scopeまで探しています.
3、scope:{…}-directiveは独立した「Isolate」の役割領域を創建し、原型継承がない.これは多重化可能なdirectiveコンポーネントを作成するための最適な選択である.親の役割領域の属性を直接にアクセス／修正しないため、意外な副作用が発生しません.
二、Isolate scope引用修飾子
1、==or=atr「Isolate」のスコープの属性は父のスコープの属性と双方向に結合され、どちらの修正も相手に影響を与えます.これは最も一般的な方法です.
2、 @ or@atr「Isolate」のスコープの属性は、親のスコープの属性と一方向に結合されています.すなわち、「Isolate」のスコープは親のスコープの値しか読み取れません.この値は永遠のStringタイプです.
3、 & or&atr「Isolate」の役割領域は、親の役割領域の属性を関数として包装し、親の役割領域の属性を関数として読み書きます.包装方法は$parseです.
三、directiveとcontrolerデータ転送と通信
1、父controllerはグローバルscope変数を監督し、イベントをサブscope(directive scope)に放送します.各directvieは自分の独立したscope機能領域があります.
2、directiveはローカルscopeを定義し、=、@、&(メソッド)文字表示でグローバルscopeを参照する.
3、directive scope(サブscope)はparent[$scope.$parent.xxx]を通じてグローバルscopeの属性を引用する.
4、directiveグローバルscope変数の変化を監督して、$scope.$parent.$watch方法を通すことができます.
四、実例説明
一、scopeスコープ
1、AnglarJSでは、サブスコープは通常、JavaScriptプロトタイプ継承機構を通じてその親の役割領域の属性と方法を継承します.しかし、例外があります.directiveでscope:{…}を使用して、このように作成された作用域は独立した「Isolate」の役割領域であり、父の役割領域もありますが、父の役割領域はそのプロトタイプチェーン上になく、父の役割領域をプロトタイプで継承することはありません.このように作用領域を定義することは、通常、多重化可能なdirectiveコンポーネントを構築するために用いられる.
2、もし私たちがサブスコープの中で父の役割領域で定義されている属性を訪問した場合、JavaScriptはまずサブスコープの中でこの属性を探していますが、原型チェーン上の父の役割領域から探すことができませんでした.もしまだ見つかっていなかったら、もう一級のプロトタイプチェーンの父の役割領域に探すことができます.AnglarJSでは、スコープの先端は$rootScopeで、JavaScriptは$root Scopeまで探しています.
3、scope:{…}-directiveは独立した「Isolate」の役割領域を創建し、原型継承がない.これは多重化可能なdirectiveコンポーネントを作成するための最適な選択である.親の役割領域の属性を直接にアクセス／修正しないため、意外な副作用が発生しません.
二、Isolate scope引用修飾子
1、==or=atr「Isolate」のスコープの属性は父のスコープの属性と双方向に結合され、どちらの修正も相手に影響を与えます.これは最も一般的な方法です.
2、 @ or@atr「Isolate」のスコープの属性は、親のスコープの属性と一方向に結合されています.すなわち、「Isolate」のスコープは親のスコープの値しか読み取れません.この値は永遠のStringタイプです.
3、 & or&atr「Isolate」の役割領域は、親の役割領域の属性を関数として包装し、親の役割領域の属性を関数として読み書きます.包装方法は$parseです.
三、directiveとcontrolerデータ転送と通信
1、父controllerはグローバルscope変数を監督し、イベントをサブscope(directive scope)に放送します.各directvieは自分の独立したscope機能領域があります.
2、directiveはローカルscopeを定義し、=、@、&(メソッド)文字表示でグローバルscopeを参照する.
3、directive scope(サブscope)はparent[$scope.$parent.xxx]を通じてグローバルscopeの属性を引用する.
4、directiveグローバルscope変数の変化を監督して、$scope.$parent.$watch方法を通すことができます.
四、実例説明
<div ng-controller="MyCtrl">
<button ng-click="show=true">show</button>
<dialog title="Hello }"
visible="}"
on-cancel="show=false;"
on-ok="show=false;parentScope();">
<!-- on-cancel、on-ok， directive isoloate scope & 。
， parent scope（ MyCtrl scope） -->
Body goes here: username:} , title:}.
<ul>
<!-- ~names parent scope -->
<li ng-repeat="name in names">}</li>
</ul>
<div>
Email:<input type="text" ng-model="email" style="width: 200px;height:20px"/>
</div>
<div>
Count:<input type="text" ng-model="person.Count" style="width: 120px;height:20px"/>
<button ng-click="changeCount()">Count 1</button>
</div>
<p></p>
</dialog>
</div>
var app = angular.module("Dialog", []);
app.controller("MyCtrl", function ($scope) {
$scope.person = {
Count: 0
};
$scope.email = '[email protected]';
$scope.names = ["name1", "name2", "name3"];
$scope.show = false;
$scope.username = "carl";
$scope.title = "parent title";
$scope.parentScope = function () {
alert("scope & ， scope ");
};
$scope.changeCount = function () {
$scope.person.Count = $scope.person.Count + 1;
}
// controller count , , directive count CountStatusChange
$scope.$watch('person.Count', function (newVal, oldVal) {
console.log('>>>parent Count change:' + $scope.person.Count);
if (newVal != oldVal) {
console.log('>>>parent $broadcast count change');
$scope.$broadcast('CountStatusChange', {"val": newVal})
}
});
});
app.directive('dialog', function factory() {
return {
priority: 100,
template: ['<div ng-show="visible">',
' <h3>}</h3>',
' <div class="body" ng-transclude></div>',
' <div class="footer">',
' <button ng-click="onOk()">OK</button>',
' <button ng-click="onCancel()">Close</button>',
' </div>',
'</div>'].join(""),
replace: false,
transclude: true,
restrict: 'E',
scope: {
title: "@",// dialog title
visible: "@",// dialog visible
onOk: "&",// wrapper function dialog on-ok
onCancel: "&"// wrapper function dialog on-cancel
},
controller: ['$scope', '$attrs', function ($scope, $attrs) {
// directive scope title @ dialog title ，
console.log('>>>title:' + $scope.title);
>>>title:Hello carl scope.html:85
// $parent scope
console.log('>>>parent username:' + $scope.$parent.username);
>>>parent username:carl
// directive scope username , scope username , undefined
console.log('>>>child username:' + $scope.username);
>>>username:undefined
// controller count
$scope.$on('CountStatusChange', function (event, args) {
console.log("child scope on( ) recieve count Change event :" + args.val);
});
// watch controller scope
$scope.$parent.$watch('person.Count', function (newVal, oldVal) {
console.log('>>>>>>>child watch parent scope[Count]:' + oldVal + ' newVal:' + newVal);
});
}]
};
});