Angular 控制器中的 $scope 在各作用域之間遵循 JS 的對(duì)象原型繼承方式
當(dāng)子作用域中沒(méi)有該對(duì)象時(shí)塞颁，默認(rèn)向上（父作用域）尋找过咬；子作用域有該對(duì)象時(shí)大渤，使用子作用域?qū)ο蟆?/p>
注：這里的父作用域包含直接父級(jí)和祖先，子作用域包含直接子級(jí)和更下層級(jí)
例如掸绞，HTML如下：
<body ng-app="myApp">
<div ng-controller="fatherCtrl">
<input type="text" ng-model="name" ng-change="nameOnChange()">
<h1>Father: {{name}}!</h1>
<div ng-controller="sonCtrl">
<input type="text" ng-model="name" ng-change="nameOnChange()">
<h1>Son: {{name}}</h1>
</div>
</div>
</body>
fatherCtrl 和 sonCtrl 里都使用了 name
sonCtrl 里沒(méi)有定義 name
var app = angular.module ('myApp', []);
app.controller('fatherCtrl', function ($scope) {
$scope.name = "father";
});
app.controller('sonCtrl', function ($scope) {
});
這時(shí)改變 sonCtrl 直接讀取 fatherCtrl 中的 name
sonCtrl 里定義了 name
var app = angular.module ('myApp', []);
app.controller('fatherCtrl', function ($scope) {
$scope.name = "father";
});
app.controller('sonCtrl', function ($scope) {
$scope.name = "son";
});
這時(shí) sonCtrl 和 fatherCtrl 中的 name 互相不影響
如果想讓不同作用域之間的數(shù)據(jù)互相傳遞泵三，就需要用到事件系統(tǒng)里的 $on、$emit和$broadcast衔掸。
簡(jiǎn)單來(lái)說(shuō) ：
-
$on
用于監(jiān)聽(tīng)事件 -
$emit
用于向上分發(fā)（子作用域向父作用域） -
$broadcast
用于向下廣播（父作用域向子作用域）
向上分發(fā)
var app = angular.module ('myApp', []);
app.controller('fatherCtrl', function ($scope) {
$scope.name = "father";
$scope.$on ('test', function(e, newName) {
$scope.name = newName;
});
});
app.controller('sonCtrl', function ($scope) {
$scope.name = "son";
$scope.nameOnChange = function () {
$scope.$emit ('test', $scope.name);
}
});
sonCtrl 中 nameOnChange 函數(shù)調(diào)用 $emit 事件烫幕，向上分發(fā) $scope.name
fatherCtrl 中 $on 事件監(jiān)聽(tīng)到結(jié)果，修改$scope.name 的值
在修改 sonCtrl 的 name 時(shí)敞映，fatherCtrl 的 name 隨之改變较曼，但修改 fatherCtrl 的 name 時(shí) sonCtrl 的 name 不變化
向下廣播
var app = angular.module ('myApp', []);
app.controller('fatherCtrl', function ($scope) {
$scope.name = "father";
$scope.nameOnChange = function () {
$scope.$broadcast ('test', $scope.name);
}
});
app.controller('sonCtrl', function ($scope) {
$scope.name = "son";
$scope.$on ('test', function(e, newName) {
$scope.name = newName;
});
$scope.nameOnChange = function () {
// $scope.$emit ('test', $scope.name);
}
});
與向上分發(fā)效果相反
fatherCtrl 中 nameOnChange 函數(shù)調(diào)用 $broadcast 事件，向下廣播 $scope.name
sonCtrl 中 $on 事件監(jiān)聽(tīng)到結(jié)果振愿，修改$scope.name 的值
在修改 fatherCtrl 的 name 時(shí)捷犹，sonCtrl 的 name 隨之改變弛饭，但修改 sonCtrl 的 name 時(shí) fatherCtrl 的 name 不變化
注：這里在 sonCtrl 里也需要定義 nameOnChange ，否則會(huì)默認(rèn)調(diào)用父級(jí)的
