Skip to content

Commit d4895aa

Browse files
bennadelbennadel
committed
Add () return demo.
1 parent 6b38647 commit d4895aa

3 files changed

Lines changed: 409 additions & 0 deletions

File tree

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ with.
1010

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

13+
* [scope.$apply() May Return A Value In AngularJS](http://bennadel.github.io/JavaScript-Demos/demos/apply-return-value-angularjs/)
1314
* [Services And Factories Are Instantiated On-Demand In AngularJS](http://bennadel.github.io/JavaScript-Demos/demos/services-instantiated-on-demand-angularjs/)
1415
* [Binding A Single Directive To Multiple Priorities On The Same Element In AngularJS](http://bennadel.github.io/JavaScript-Demos/demos/double-directive-priority-angularjs/)
1516
* [Implementing Controller-As Using A Directive In AngularJS 1.0.8](http://bennadel.github.io/JavaScript-Demos/demos/controller-as-directive-angularjs/)

‎demos/apply-return-value-angularjs/index.htm‎

Lines changed: 192 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,192 @@
1+
<!doctype html>
2+
<html ng-app="Demo">
3+
<head>
4+
<meta charset="utf-8" />
5+
6+
<title>
7+
scope.$apply() May Return A Value In AngularJS
8+
</title>
9+
10+
<style type="text/css">
11+
12+
a[ ng-click ] {
13+
cursor: pointer ;
14+
text-decoration: underline ;
15+
}
16+
17+
div.zone {
18+
background-color: #FAFAFA ;
19+
border: 2px solid #CCCCCC ;
20+
cursor: pointer ;
21+
padding: 20px 20px 20px 20px ;
22+
text-align: center ;
23+
}
24+
25+
div.zone.active {
26+
border-color: #FF00CC ;
27+
}
28+
29+
</style>
30+
</head>
31+
<body ng-controller="AppController">
32+
33+
<h1>
34+
scope.$apply() May Return A Value In AngularJS
35+
</h1>
36+
37+
<div bn-clicker="processClick( x, y )" class="zone">
38+
Click me to do stuff.
39+
</div>
40+
41+
42+
<!-- Load scripts. -->
43+
<script type="text/javascript" src="../../vendor/jquery/jquery-2.1.0.min.js"></script>
44+
<script type="text/javascript" src="../../vendor/angularjs/angular-1.2.26.min.js"></script>
45+
<script type="text/javascript">
46+
47+
// Create an application module for our demo.
48+
var app = angular.module( "Demo", [] );
49+
50+
51+
// -------------------------------------------------- //
52+
// -------------------------------------------------- //
53+
54+
55+
// I control the root of the application.
56+
app.controller(
57+
"AppController",
58+
function( $scope, $q, $timeout ) {
59+
60+
$scope.processClick = function( x, y ) {
61+
62+
var deferred = $q.defer();
63+
64+
// Mimic some sort of processing latency.
65+
$timeout(
66+
function handleDeferredResolution() {
67+
68+
console.info( "Processed click at {%d,%d}", x, y );
69+
70+
deferred.resolve();
71+
x = y = deferred = null;
72+
73+
},
74+
1000,
75+
false // No need for apply - no model was changed.
76+
);
77+
78+
return( deferred.promise );
79+
80+
};
81+
82+
}
83+
);
84+
85+
86+
// -------------------------------------------------- //
87+
// -------------------------------------------------- //
88+
89+
90+
// I handle a clickable area and pass the {x,y} coordinates to the given handler.
91+
app.directive(
92+
"bnClicker",
93+
function( $q ) {
94+
95+
// I bind the JavaScript events to the local scope.
96+
function link( scope, element, attributes ) {
97+
98+
element.on(
99+
"click",
100+
function handleClickEvent( event ) {
101+
102+
var position = element.position();
103+
104+
// Calculate "local" click coordinates.
105+
var coordinates = {
106+
x: ( event.pageX - position.left ),
107+
y: ( event.pageY - position.top )
108+
};
109+
110+
// Setup the active state.
111+
element.addClass( "active" );
112+
113+
// The processing handler is supposed to return a promise.
114+
// That promise is then being pulled back through the $apply().
115+
var promise = scope.$apply(
116+
function applyClickToScope() {
117+
118+
// Pass the return value of the handler back through
119+
// the return value of the $apply() invocation.
120+
// --
121+
// CAUTION: If the handler - processClicks() - raises
122+
// an exception, the return value will be undefined.
123+
return( scope.processClick( coordinates ) );
124+
125+
}
126+
);
127+
128+
// When the event has been processed, teardown the active
129+
// state. However, since the promise may not be valid (if the
130+
// handler raised an exception), it can be safer to wrap the
131+
// "unknown" promise in another promise to normalize it.
132+
$q.when( promise ).finally(
133+
function handleFinally() {
134+
135+
element.removeClass( "active" );
136+
137+
}
138+
);
139+
140+
// Clear closed-over variables.
141+
event = position = coordinates = promise = null;
142+
143+
}
144+
);
145+
146+
}
147+
148+
149+
// Return the directive configuration. In this case, we are binding an
150+
// isolate scope method to the directive attribute.
151+
return({
152+
link: link,
153+
restrict: "A",
154+
scope: {
155+
processClick: "&bnClicker"
156+
}
157+
});
158+
159+
}
160+
);
161+
162+
</script>
163+
164+
</body>
165+
</html>
166+
167+
168+
169+
170+
171+
172+
173+
174+
175+
176+
177+
178+
179+
180+
181+
182+
183+
184+
185+
186+
187+
188+
189+
190+
191+
192+

0 commit comments

Comments
 (0)