At the time of project development, global scope and local scope directive is not clear scope, global scope and local scope directive communication master thorough enough, here to do a summary of the use of global scope and local scope of the directive.
A, scope scope
1, AngularJS, the sub-scope properties and methods of its parent scope usually inherited through JavaScript prototype inheritance. There is one exception: use the scope in directive: {...}, the scope of this approach is to create a separate "Isolate" scopes, scopes it has a parent, but not its parent scope prototype chain, We will not inherit the parent scope prototype. Commonly used in this way define the scope directive reusable assembly configured.
2, if we visit a parent scope defined in the sub-scope property, JavaScript first look for the property in the child scope, and then look for from a parent did not find the scope of the prototype chain, if not found will again father up a prototype chain of scopes to find. In AngularJS, the tip of the scope of the prototype chain is $ rootScope, JavaScript seeking up to $ rootScope.
3, scope: {...} - directive to create a separate "Isolate" scope, no prototype inheritance. This is the best choice to create reusable components directive. Because it does not directly access / modify the properties of the parent scope, no unexpected side effects.
Two, Isolate scope quote modifiers
1, = or = attr "Isolate" attribute of the parent scope scope attributes two-way binding, any modifications that affect the other party, which is the most common way;
2, @ or @attr "Isolate" attribute and the parent attribute scope scope way binding, i.e., "Isolate" Scope parent scope only read value, and the value of type String forever;
3, & or & attr "Isolate" Scope the parent scope attribute packaged into a function, so as to read and write functions parent scope properties, the parse package is $
Three, directive data transfer and communication with the controller
1, the parent controller monitor global scope (parent scope) variables, and broadcast events to the child scope (directive scope, each has its own independent scope directvie scope)
2, directive defines the local scope, by = @, & (Method) character display reference global scope
3, directive scope (sub-scope) properties of global scope by reference parent [$ scope. $ Parent.xxx]
4, directive monitor global scope variables change, by $ scope. $ Parent. $ Watch method
Fourth, the example shows
<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 test code:
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);
});
}]
};
});
Reproduced in: https: //www.cnblogs.com/hubcarl/p/4202053.html