概念
- $emit,$broadcast設(shè)置值鞭执,$on獲取值
- $emit向上傳遞司顿,$broadcast向下傳遞
EXAMPLE
- html
<pre>
<div ng-controller="ParentController">
parentCount:{{ count }}
<div ng-controller="CurentController">
<button type="button" ng-click="emit()">emit</button>
<button type="button" ng-click="broadcast()">broadcast</button>
curentCount:{{ count }}
<div ng-controller="ChildController">
childCount:{{ count }}
</div>
</div>
<div ng-controller="BorController">
borCount:{{ count }}
</div>
</div>
</pre> - js
<pre>
// 父級(jí)controller
.controller('ParentController', function($scope) {
$scope.count = 0;
$scope.$on('p-count', function(d, data){
console.log(data); // emit中保存的值
$scope.count ++;
})
})
// 使用$emit,$broadcast保存值,可以在父級(jí)芒粹,子級(jí)和本身中取得
.controller('CurentController', function($scope) {
$scope.count = 0;
$scope.emit = function(){
$scope.count ++;
// 向父級(jí)controller傳遞值p-count
$scope.$emit('p-count', $scope.count);
}
$scope.broadcast = function(){
$scope.count = $scope.count + 1;
// 可以不傳第二個(gè)args,$on獲取時(shí)大溜,第二個(gè)參數(shù)為undefined
$scope.$broadcast('c-count');
}
})
.controller('ChildController', function($scope){
$scope.count = 0;
$scope.$on('c-count', function(d,data){
console.log(data); // undefined
$scope.count ++
})
})
// 兄弟controller化漆,不會(huì)被影響
.controller('BorController', function($scope) {
$scope.count = 0;
// 下面兩個(gè)不被觸發(fā),回調(diào)函數(shù)不執(zhí)行钦奋,不輸出任何東西
$scope.$on('p-count', function(d,data){
console.log(data);
})
$scope.$on('c-count', function(d,data){
console.log(data);
}
})
</pre>