1:先通過關(guān)鍵字 $emit(" 變量名 "); 向父級控制器傳輸事件糟红。
PS:emit會自動按照HTML的結(jié)構(gòu)尋找父級的controller。
2:父級通過關(guān)鍵字 $scope.$on ("$emit變量名",function(){$scope.$broadcast("向下廣播變量名");});
PS:父級先收到子控制器的請求蚯舱,然后通過關(guān)鍵字$broadcast定義一個向下的廣播名改化,開始向下廣播。
3:需要接收廣播的子控制器枉昏,依然用 $scope.$on(" 廣播名 ",function(){ }); 接廣播然后進行處理陈肛。
<!doctype html>
<html ng-app = "myapp">
<head>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-controller = "Test">
<h1>{{text}}</h1>
<div ng-controller = "TestOne">
<h2>{{one}}</h2>
</div>
<div ng-controller = "TestTow">
<h3>{{Two}}</h3>
</div>
<div ng-controller = "TestThree">
<h4>{{Three}}</h4>
<buttom ng-click = "Call()">點擊傳輸</buttom>
</div>
</div>
</body>
<script>
var app = angular.module('myapp', []);
app.controller("Test", function($scope){
$scope.text = "頂層默認值";
$scope.$on ("CallTest",function(){
$scope.$broadcast("CallNext");
});
});
app.controller("TestOne", function($scope){
$scope.one = "第一個默認值";
$scope.$on ("CallNext",function(){
$scope.one = "收到頂部數(shù)據(jù)更新要求"
});
});
app.controller('TestTow', function($scope){
$scope.Two = "第二個默認值";
$scope.$on ("CallNext",function(){
$scope.Two = "我也收到頂部數(shù)據(jù)更新要求"
});
});
app.controller('TestThree', function($scope){
$scope.Three = "第三個默認值";
$scope.Call = function(){
$scope.Three = "開始向頂層傳輸!"
$scope.$emit("CallTest");
};
});
</script>
</html>
最后編輯于 :
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者