Skip to content

Commit bf24f06

Browse files
bennadelbennadel
committed
Add interpolation workflow example.
1 parent 082f754 commit bf24f06

File tree

5 files changed

+366
-0
lines changed

5 files changed

+366
-0
lines changed

‎demos/attribute-interpolation-workflow-changes-angularjs/index.htm

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
6+
<title>
7+
Looking At Attribute Interpolation Workflow Changes In AngularJS
8+
</title>
9+
</head>
10+
<body>
11+
12+
<h1>
13+
Looking At Attribute Interpolation Workflow Changes In AngularJS
14+
</h1>
15+
16+
<ul>
17+
<li>
18+
<a href="./old.htm">In AngularJS 1.0.8</a> (ie, pre 1.2).
19+
</li>
20+
<li>
21+
<a href="./new.htm">In AngularJS 1.2.16</a> (ie, post 1.2).
22+
</li>
23+
</ul>
24+
25+
</body>
26+
</html>

‎demos/attribute-interpolation-workflow-changes-angularjs/new.htm

+87
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
<!doctype html>
2+
<html ng-app="Demo">
3+
<head>
4+
<meta charset="utf-8" />
5+
6+
<title>
7+
Looking At Attribute Interpolation Workflow In AngularJS 1.2.16
8+
</title>
9+
</head>
10+
<body ng-controller="AppController">
11+
12+
<h1>
13+
Looking At Attribute Interpolation Workflow In AngularJS 1.2.16
14+
</h1>
15+
16+
<!-- Here, wer are using a Directive that uses attribute interpolation. -->
17+
<p bn-title="My friend is {{ friend }}.">
18+
This is a directive.
19+
</p>
20+
21+
22+
<!-- Load scripts. -->
23+
<script type="text/javascript" src="../../vendor/jquery/jquery-2.1.0.min.js"></script>
24+
<script type="text/javascript" src="../../vendor/angularjs/angular-1.2.16.min.js"></script>
25+
<script type="text/javascript">
26+
27+
// Create an application module for our demo.
28+
var app = angular.module( "Demo", [] );
29+
30+
31+
// -------------------------------------------------- //
32+
// -------------------------------------------------- //
33+
34+
35+
// I control the root of the application.
36+
app.controller(
37+
"AppController",
38+
function( $scope, $parse ) {
39+
40+
$scope.friend = "Sarah";
41+
42+
}
43+
);
44+
45+
46+
// -------------------------------------------------- //
47+
// -------------------------------------------------- //
48+
49+
50+
// I am the directive that tests the attribute interpolation to see when the
51+
// interpolated value is available to the link function.
52+
app.directive(
53+
"bnTitle",
54+
function() {
55+
56+
// I bind the JavaScript events to the scope.
57+
function link( $scope, element, attributes ) {
58+
59+
// Check initial value.
60+
console.log( "On link load:", attributes.bnTitle );
61+
62+
// Watch the value over time.
63+
attributes.$observe(
64+
"bnTitle",
65+
function( newValue, oldValue ) {
66+
67+
console.log( "On observe:", newValue );
68+
69+
}
70+
);
71+
72+
}
73+
74+
75+
// Return the directive configuration.
76+
return({
77+
link: link,
78+
restrict: "A"
79+
});
80+
81+
}
82+
);
83+
84+
</script>
85+
86+
</body>
87+
</html>

‎demos/attribute-interpolation-workflow-changes-angularjs/old.htm

+87
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
<!doctype html>
2+
<html ng-app="Demo">
3+
<head>
4+
<meta charset="utf-8" />
5+
6+
<title>
7+
Looking At Attribute Interpolation Workflow In AngularJS 1.0.8
8+
</title>
9+
</head>
10+
<body ng-controller="AppController">
11+
12+
<h1>
13+
Looking At Attribute Interpolation Workflow In AngularJS 1.0.8
14+
</h1>
15+
16+
<!-- Here, wer are using a Directive that uses attribute interpolation. -->
17+
<p bn-title="My friend is {{ friend }}.">
18+
This is a directive.
19+
</p>
20+
21+
22+
<!-- Load scripts. -->
23+
<script type="text/javascript" src="../../vendor/jquery/jquery-2.1.0.min.js"></script>
24+
<script type="text/javascript" src="../../vendor/angularjs/angular-1.0.8.min.js"></script>
25+
<script type="text/javascript">
26+
27+
// Create an application module for our demo.
28+
var app = angular.module( "Demo", [] );
29+
30+
31+
// -------------------------------------------------- //
32+
// -------------------------------------------------- //
33+
34+
35+
// I control the root of the application.
36+
app.controller(
37+
"AppController",
38+
function( $scope, $parse ) {
39+
40+
$scope.friend = "Sarah";
41+
42+
}
43+
);
44+
45+
46+
// -------------------------------------------------- //
47+
// -------------------------------------------------- //
48+
49+
50+
// I am the directive that tests the attribute interpolation to see when the
51+
// interpolated value is available to the link function.
52+
app.directive(
53+
"bnTitle",
54+
function() {
55+
56+
// I bind the JavaScript events to the scope.
57+
function link( $scope, element, attributes ) {
58+
59+
// Check initial value.
60+
console.log( "On link load:", attributes.bnTitle );
61+
62+
// Watch the value over time.
63+
attributes.$observe(
64+
"bnTitle",
65+
function( newValue, oldValue ) {
66+
67+
console.log( "On observe:", newValue );
68+
69+
}
70+
);
71+
72+
}
73+
74+
75+
// Return the directive configuration.
76+
return({
77+
link: link,
78+
restrict: "A"
79+
});
80+
81+
}
82+
);
83+
84+
</script>
85+
86+
</body>
87+
</html>

‎index.htm

+3
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,9 @@ <h1>
1313
</h1>
1414

1515
<ul>
16+
<li>
17+
<a href="./demos/attribute-interpolation-workflow-changes-angularjs/">Looking At Attribute Interpolation Workflow Changes In AngularJS</a>
18+
</li>
1619
<li>
1720
<a href="./demos/inspecting-attribute-normalization-directives-angularjs/">Inspecting Attribute-Normalization Within Directives In AngularJS</a>
1821
</li>

0 commit comments

Comments
 (0)