-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathangular-communication-event.html
99 lines (97 loc) · 4.09 KB
/
angular-communication-event.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>angular-communication-event</title>
<script type="text/javascript" src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="app">
<h2>向上传播事件</h2>
<div ng-controller="ParentController">
<p>Parent Location: {{location}}</p>
<div ng-controller="ChildController">
<p>Child Location: {{location}}</p>
<button ng-click="emit()">emit</button>
</div>
</div>
<h2>向下广播事件</h2>
<div ng-controller="PController">
<p>Parent Location: {{location}}</p>
<button ng-click="broadcast()">broadcast</button>
<div ng-controller="CController">
<p>Child Location: {{location}}</p>
</div>
</div>
<h2>兄弟作用域之间传播</h2>
<div ng-controller="PaController">
Parent Location: {{location}}
<button ng-click="broadcast()">broadcast</button>
<div ng-controller="BroAController">
<h4>Bro-A</h4>
<p>Bro-A Location: {{location}} <button ng-click="recallBro()">recallBro</button></p>
</div>
<div ng-controller="BroBController">
<h4>Bro-B</h4>
<p>Bro-B Location: {{location}} <button ng-click="recallBro()">recallBro</button></p>
</div>
</div>
<script>
var app = angular.module('app', []);
app.controller('ParentController', ['$scope', function($scope){
$scope.location = "Beijing";
$scope.$on('summon', function(e, newLocation) {
$scope.location = newLocation;
});
}]);
app.controller('ChildController', ['$scope', function($scope){
$scope.location = "Shanghai";
$scope.emit = function() {
$scope.$emit('summon', $scope.location);
}
}]);
app.controller('PController', ['$scope', function($scope){
$scope.location = 'Beijing';
$scope.broadcast = function() {
$scope.$broadcast('recall', $scope.location);
}
}]);
app.controller('CController', ['$scope', function($scope){
$scope.location = "Shanghai";
$scope.$on('recall', function(e, newLocation) {
$scope.location = newLocation;
});
}]);
app.controller('PaController', ['$scope', function($scope){
$scope.location = 'Beijing';
$scope.broadcast = function(){
$scope.location = 'Los Angeles';
$scope.$broadcast('down', $scope.location);
};
$scope.$on('up', function(e, newLocation) {
$scope.location = newLocation;
$scope.$broadcast('down', $scope.location);
});
}]);
app.controller('BroAController', ['$scope', function($scope){
$scope.location = 'Shanghai';
$scope.recallBro = function(){
$scope.location = 'Liverpool';
$scope.$emit('up', $scope.location);
};
$scope.$on('down', function(e, newLocation){
$scope.location = newLocation;
});
}]);
app.controller('BroBController', ['$scope', function($scope){
$scope.location = 'Shamen';
$scope.recallBro = function(){
$scope.location = 'Sydney';
$scope.$emit('up', $scope.location);
};
$scope.$on('down', function(e, newLocation){
$scope.location = newLocation;
});
}]);
</script>
</body>
</html>