Skip to content

Commit 40e2b8e

Browse files
bennadelbennadel
committed
Add the controller-as demo for 1.0.8.
1 parent 1a31dda commit 40e2b8e

File tree

2 files changed

+181
-0
lines changed

2 files changed

+181
-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+
* [Implementing Controller-As Using A Directive In AngularJS 1.0.8](http://bennadel.github.io/JavaScript-Demos/demos/controller-as-directive-angularjs/)
1314
* [Directive Controllers Can Use Dependency Injection In AngularJS](http://bennadel.github.io/JavaScript-Demos/demos/directive-controller-di-angularjs/)
1415
* [Implementing Track-By Using A Directive In AngularJS 1.0.8](http://bennadel.github.io/JavaScript-Demos/demos/track-by-directive-ng-repeat-angularjs/)
1516
* [Always Trigger The $destroy Event Before Removing Elements In AngularJS Directives](http://bennadel.github.io/JavaScript-Demos/demos/trigger-destroy-before-removing-element-angularjs/)

‎demos/controller-as-directive-angularjs/index.htm

+180
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,180 @@
1+
<!doctype html>
2+
<html ng-app="Demo">
3+
<head>
4+
<meta charset="utf-8" />
5+
6+
<title>
7+
Implementing Controller-As Using A Directive In AngularJS 1.0.8
8+
</title>
9+
10+
<style type="text/css">
11+
12+
a[ ng-click ] {
13+
color: red ;
14+
cursor: pointer ;
15+
text-decoration: underline ;
16+
}
17+
18+
</style>
19+
</head>
20+
<body>
21+
22+
<h1>
23+
Implementing Controller-As Using A Directive In AngularJS 1.0.8
24+
</h1>
25+
26+
<!-- NOTE: As vm. -->
27+
<div ng-controller="AppController" as="vm">
28+
29+
<p>
30+
<a ng-click="vm.toggleSections()">Toggle Sections</a>
31+
</p>
32+
33+
<div ng-switch="vm.section">
34+
35+
<!-- NOTE: As vm. -->
36+
<p
37+
ng-switch-when="firstSection"
38+
ng-controller="FirstController" as="vm">
39+
40+
{{ vm.title }}
41+
42+
</p>
43+
44+
<!-- NOTE: As vm. -->
45+
<p
46+
ng-switch-when="secondSection"
47+
ng-controller="SecondController" as="vm">
48+
49+
{{ vm.title }}
50+
51+
</p>
52+
53+
</div>
54+
55+
</div>
56+
57+
58+
<!-- Load scripts. -->
59+
<script type="text/javascript" src="../../vendor/jquery/jquery-2.0.3.min.js"></script>
60+
<script type="text/javascript" src="../../vendor/angularjs/angular-1.0.8.min.js"></script>
61+
<script type="text/javascript">
62+
63+
// Create an application module for our demo.
64+
var app = angular.module( "Demo", [] );
65+
66+
67+
// -------------------------------------------------- //
68+
// -------------------------------------------------- //
69+
70+
71+
// I control the root of the application.
72+
app.controller(
73+
"AppController",
74+
function() {
75+
76+
// I represent the currently-selected section.
77+
this.section = "firstSection";
78+
79+
80+
// I switch the currently-selected section.
81+
this.toggleSections = function() {
82+
83+
this.section = ( this.section === "firstSection" )
84+
? "secondSection"
85+
: "firstSection"
86+
;
87+
88+
};
89+
90+
}
91+
);
92+
93+
94+
// -------------------------------------------------- //
95+
// -------------------------------------------------- //
96+
97+
98+
// I simply demonstrate that the "vm" reference works.
99+
app.controller(
100+
"FirstController",
101+
function() {
102+
103+
this.title = "First controller, for the win!";
104+
105+
}
106+
);
107+
108+
// I simply demonstrate that the "vm" reference works.
109+
app.controller(
110+
"SecondController",
111+
function() {
112+
113+
this.title = "Second controller, heck yeah!";
114+
115+
}
116+
);
117+
118+
119+
// -------------------------------------------------- //
120+
// -------------------------------------------------- //
121+
122+
123+
// I attempt to implement (some of) the "controller-as" syntax in AngularJS
124+
// 1.0.8. This treats the related ngController as an item of the "view model"
125+
// in the HTML.
126+
// --
127+
// CAUTION: This does NOT make the scope unavailable in the view-model; it simply
128+
// augments the scope with a circular reference.
129+
app.directive(
130+
"as",
131+
function() {
132+
133+
// I copy the ngController instance reference into the scope so that it
134+
// can be used to reference the Controller inside the View.
135+
function prelink( scope, element, attributes, controller ) {
136+
137+
scope[ attributes.as ] = controller;
138+
139+
// Injecting the controller into the scope is likely to create a
140+
// circular object reference: Controller -> Scope -> Controller. As
141+
// such, let's take extra care to try to break up the reference in
142+
// order to help with garbage collection.
143+
scope.$on(
144+
"$destroy",
145+
function handleDestroyEvent() {
146+
147+
scope[ attributes.as ] = null;
148+
149+
// Also, now that we've created a closure, it may be helpful to
150+
// clear "closed over" variable references.
151+
scope = element = attributes = controller = null;
152+
153+
}
154+
);
155+
156+
}
157+
158+
159+
// Return the directive configuration.
160+
// --
161+
// NOTE: We are using the "prelink" phase so that the controller reference
162+
// is available to the linking the phase of the nested directives.
163+
// --
164+
// NOTE: ngController runs at priority 500.
165+
return({
166+
link: {
167+
pre: prelink
168+
},
169+
priority: 499,
170+
require: "ngController",
171+
restrict: "A"
172+
});
173+
174+
}
175+
);
176+
177+
</script>
178+
179+
</body>
180+
</html>

0 commit comments

Comments
 (0)