Skip to content

Commit d7e2107

Browse files
bennadelbennadel
committed
Add scope-off demo.
1 parent 2bcb573 commit d7e2107

File tree

3 files changed

+186
-0
lines changed

3 files changed

+186
-0
lines changed

‎README.md

+1
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ with.
1010

1111
## My JavaScript Demos - I Love JavaScript!
1212

13+
* [Unbinding Scope.$on() Event Handlers In AngularJS](http://bennadel.github.io/JavaScript-Demos/demos/unbinding-scope-on-event-handlers-angularjs/)
1314
* [Creating And Extending A Lodash / Underscore Service In AngularJS](http://bennadel.github.io/JavaScript-Demos/demos/lodash-service-in-angularjs/)
1415
* [scope.$apply() May Return A Value In AngularJS](http://bennadel.github.io/JavaScript-Demos/demos/apply-return-value-angularjs/)
1516
* [Services And Factories Are Instantiated On-Demand In AngularJS](http://bennadel.github.io/JavaScript-Demos/demos/services-instantiated-on-demand-angularjs/)

‎demos/unbinding-scope-on-event-handlers-angularjs/demo.css

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
2+
div.event-target {
3+
background-color: #FAFAFA ;
4+
border: 1px solid #CCCCCC ;
5+
border-radius: 4px 4px 4px 4px ;
6+
color: #CCCCCC ;
7+
cursor: pointer ;
8+
font-size: 36px ;
9+
font-weight: bold ;
10+
height: 100px ;
11+
line-height: 100px ;
12+
text-align: center ;
13+
width: 48% ;
14+
}
15+
16+
div.event-target.active {
17+
border-color: #FF33CC ;
18+
color: #333333 ;
19+
}
20+
21+
div.event-target.left {
22+
float: left ;
23+
}
24+
25+
div.event-target.right {
26+
float: right ;
27+
}

‎demos/unbinding-scope-on-event-handlers-angularjs/index.htm

+158
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
<!doctype html>
2+
<html ng-app="Demo">
3+
<head>
4+
<meta charset="utf-8" />
5+
6+
<title>
7+
Unbinding Scope.$on() Event Handlers In AngularJS
8+
</title>
9+
10+
<link rel="stylesheet" type="text/css" href="./demo.css"></link>
11+
</head>
12+
<body ng-controller="AppController">
13+
14+
<h1>
15+
Unbinding Scope.$on() Event Handlers In AngularJS
16+
</h1>
17+
18+
<div
19+
ng-controller="EventController"
20+
ng-click="toggleListener()"
21+
class="event-target left"
22+
ng-class="{ active: isWatchingEvent }">
23+
24+
{{ eventCount }}
25+
26+
</div>
27+
28+
<div
29+
ng-controller="EventController"
30+
ng-click="toggleListener()"
31+
class="event-target right"
32+
ng-class="{ active: isWatchingEvent }">
33+
34+
{{ eventCount }}
35+
36+
</div>
37+
38+
39+
<!-- Load scripts. -->
40+
<script type="text/javascript" src="../../vendor/jquery/jquery-2.1.0.min.js"></script>
41+
<script type="text/javascript" src="../../vendor/angularjs/angular-1.2.26.min.js"></script>
42+
<script type="text/javascript">
43+
44+
// Create an application module for our demo.
45+
var app = angular.module( "Demo", [] );
46+
47+
48+
// -------------------------------------------------- //
49+
// -------------------------------------------------- //
50+
51+
52+
// I control the root of the application.
53+
app.controller(
54+
"AppController",
55+
function( $scope, $interval ) {
56+
57+
// Continuously broadcast an event down the scope tree.
58+
$interval(
59+
function handleInterval() {
60+
61+
$scope.$broadcast( "ping" );
62+
63+
},
64+
200
65+
);
66+
67+
}
68+
);
69+
70+
71+
// -------------------------------------------------- //
72+
// -------------------------------------------------- //
73+
74+
75+
// I control the event targets.
76+
app.controller(
77+
"EventController",
78+
function( $scope ) {
79+
80+
// I keep track of the number of times we've handled a given event.
81+
$scope.eventCount = 0;
82+
83+
// I keep track of whether or not this controller is currently listening
84+
// for the broadcast event.
85+
$scope.isWatchingEvent = false;
86+
87+
// I am the deregistration method for the event handler. This is the
88+
// closest thing we have to a scope.$off() method.
89+
var unbindHandler = null;
90+
91+
// When the controller loads, start listening for broadcast events.
92+
startWatchingEvent();
93+
94+
95+
// ---
96+
// PUBLIC METHODS
97+
// ---
98+
99+
100+
// I turn on / off event listening depending on the current state.
101+
$scope.toggleListener = function() {
102+
103+
unbindHandler
104+
? stopWatchingEvent()
105+
: startWatchingEvent()
106+
;
107+
108+
};
109+
110+
111+
// ---
112+
// PRIVATE METHODS
113+
// ---
114+
115+
116+
// I respond to the "ping" event on the scope.
117+
function handlePingEvent( event ) {
118+
119+
$scope.eventCount++;
120+
121+
}
122+
123+
124+
// I start watching for the "ping" event on the scope.
125+
function startWatchingEvent() {
126+
127+
// When we bind the $on() event, the return value is the
128+
// deregistration method for the event handler. This is the way we
129+
// can handle unbind event handlers without destroying the scope.
130+
// --
131+
// NOTE: When a scope is $destroy()'d, it will automatically unbind
132+
// all of your event handlers.
133+
unbindHandler = $scope.$on( "ping", handlePingEvent );
134+
135+
$scope.isWatchingEvent = true;
136+
137+
}
138+
139+
140+
// I stop watching for the "ping" event on the scope.
141+
function stopWatchingEvent() {
142+
143+
// Invoke the deregistration method in order to unbind the event
144+
// handler. Set to null so we know how to handle the "toggle" method.
145+
unbindHandler();
146+
unbindHandler = null;
147+
148+
$scope.isWatchingEvent = false;
149+
150+
}
151+
152+
}
153+
);
154+
155+
</script>
156+
157+
</body>
158+
</html>

0 commit comments

Comments
 (0)