forked from bennadel/JavaScript-Demos
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.htm
143 lines (100 loc) · 3.38 KB
/
index.htm
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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<!doctype html>
<html ng-app="Demo">
<head>
<meta charset="utf-8" />
<title>
How Scope.$broadcast() Interacts With Isolate Scopes In AngularJS
</title>
</head>
<body ng-controller="AppController">
<h1>
How Scope.$broadcast() Interacts With Isolate Scopes In AngularJS
</h1>
<div bn-isolate>
<p ng-controller="InnerController">
Look at the console output.
</p>
</div>
<!-- Load scripts. -->
<script type="text/javascript" src="../../vendor/jquery/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="../../vendor/angularjs/angular-1.2.26.min.js"></script>
<script type="text/javascript">
// Create an application module for our demo.
var app = angular.module( "Demo", [] );
// -------------------------------------------------- //
// -------------------------------------------------- //
// I control the root of the application.
app.controller(
"AppController",
function( $scope, $interval, $rootScope ) {
// I keep track of the number of times the ping event is being broadcast
// down from the root of the application.
$scope.pingCount = 0;
// Continuously broadcast an event down the scope tree. Note that the
// PingCount is being incremented as part of the broadcast.
$interval(
function handleInterval() {
$scope.$broadcast( "ping", ++$scope.pingCount );
},
1000
);
}
);
// -------------------------------------------------- //
// -------------------------------------------------- //
// I create an isolate scope directive to investigate how events interact with
// both parent scope and "inner" scope.
app.directive(
"bnIsolate",
function() {
// I bind the JavaScript events to the local scope.
function link( scope, element, attributes ) {
// I watch for changes to any prototypically inherited pingCount
// properties. Since this is an isolate scope, this should be
// Undefined in the local scope.
scope.$watch(
"pingCount",
function handlePingCountChange( newValue, oldValue ) {
console.log( "PingCount in isolate scope:", newValue );
}
);
// I listen for ping events from the parent scope chain.
scope.$on(
"ping",
function handlePingEvent( event, pingCount ) {
console.log( "Ping event in isolate scope:", pingCount );
// I turn around and broadcast a "received" event.
scope.$broadcast( "pingReceivedByIsolate" );
}
);
}
// Return the directive configuration. In this case we are defining an
// isolate scope, but not mapping any input values or functions.
return({
link: link,
restrict: "A",
scope: {}
});
}
);
// -------------------------------------------------- //
// -------------------------------------------------- //
// I am a controller that is "inside" the isolate scope from an HTML markup
// standpoint, but not from Scope standpoint.
app.controller(
"InnerController",
function( $scope ) {
// I listen for ping-received events from the isolate scope. However,
// since the isolate scope is NOT in the parent-scope chain, this event
// should never be handlered here.
$scope.$on(
"pingReceivedByIsolate",
function handleIsolatePingEvent( event ) {
console.log( "pingReceivedByIsolate in inner controller." );
}
);
}
);
</script>
</body>
</html>