プロジェクトの開発時には、グローバルスコープとローカルスコープディレクティブは明確なスコープ、グローバルスコープとローカルスコープディレクティブ通信マスタは、グローバルスコープとディレクティブのローカルスコープの使用の要約を行うためにここに、十分に徹底的ではありません。
、スコープスコープ
1、AngularJS、通常のJavaScriptプロトタイプ継承によって継承された親スコープのサブスコープのプロパティとメソッド。ディレクティブ内のスコープを使用します：一つの例外があります{...}は、このアプローチの適用範囲は、独立した「アイソ」スコープを作成することです、それは親を持つスコープはなく、その親スコープのプロトタイプチェーン、私たちは、親スコープのプロトタイプを継承しません。一般に構成されたスコープディレクティブ再利用可能なアセンブリを定義し、このように使用されます。
2我々は、サブスコープのプロパティで定義された親スコープを訪問する場合は、JavaScriptが最初の子スコープでプロパティを探し、そして再びますが見つからない場合は、親から探しすることは、プロトタイプチェーンの範囲を見つけることができませんでした父アップのスコープのプロトタイプチェーンを検索します。AngularJSでは、プロトタイプチェーンのスコープの先端には、JavaScriptが$ rootScopeまで求めて、$ rootScopeです。
図3に示すように、スコープ：{...} - 別個の「分離」スコープ、プロトタイプの継承を作成するディレクティブ。これは、再利用可能なコンポーネントのディレクティブを作成するための最良の選択です。それは直接アクセスしないので、/、予期しない副作用を親スコープのプロパティを変更しません。
二、スコープの引用修飾子を分離
1、=または= attrの親スコープスコープの属性は、最も一般的な方法である相手に、影響を与える変更を双方向結合属性「隔離」。
2、@または「分離」属性と親属性スコープの範囲は方法の結合、すなわち、スコープ親スコープのみ値を読み取る「分離」@attr、及び永久String型の値。
3、＆または＆attrの「アイソ」のスコープ機能にパッケージ化親スコープ属性、解析パッケージは$で、関数の親スコープのプロパティを読み書きするように
コントローラと三、指令データ転送および通信
子スコープに1、親コントローラモニタグローバルスコープ（親スコープ）変数、およびブロードキャストイベント（ディレクティブのスコープは、それぞれが独自の独立したスコープdirectvieスコープを持っています）
図2に示すように、指令は= @、＆（方法）文字表示基準グローバルスコープによって、ローカルスコープを定義します
図3に示すように、指令範囲（サブスコープ）参照親によってグローバルスコープの特性[$スコープ。$ Parent.xxx]
4、ディレクティブモニターグローバルスコープ変数は$スコープ。$親によって、変化する。$ウォッチ方法を
第四に、例えば、ショー
<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>
C テストコードontroller。
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);
});
}]
};
});
ます。https：//www.cnblogs.com/hubcarl/p/4202053.htmlで再現