angular deep directive
TRANSCRIPT
Angular-Deep-DirectiveFrom Nutshell To Awesome
By HenryTao – http://henrytao.me - https://mysquar.com
Technology lover.
Full-stack Engineer at MySQUAR.
Community project – angularify.org.
(angularify, angular-offline, angular-debone,
angular-emojiuni, angular-detector, angular-cookies…)
By HenryTao – http://henrytao.me - https://mysquar.com
github.com/henrytao-me
angularify.org
2
By HenryTao – http://henrytao.me - https://mysquar.com 3
What can you take away after this?
scope (=, $, &)
transclude (dynamic content)
link function VS compile function
nested directive
Agenda
AngularJS Directive overview and tips.
Advance Directive.
Time to Hack.
Resources & References.
By HenryTao – http://henrytao.me - https://mysquar.com 4
// declare
<div mysquar-directive></div>
// result
<div mysquar-directive>Welcome to MySQUAR</div>
// javascript code
angular.module('myquarApp',[
]).directive('mysquarDirective', function() {
return {
link: function($scope, $element, $attrs) {
$element.html('Welcome to MySQUAR’);
}
};
});
By HenryTao – http://henrytao.me - https://mysquar.com
MySQUAR Directive
5
Directive is a function
that run on particular
DOM element
By HenryTao – http://henrytao.me - https://mysquar.com 6
By HenryTao – http://henrytao.me - https://mysquar.com
DOM $compile $link DOM’
restrict
priority
terminal
template
templateUrl
replace
controller
require
scope
transclude
link
compile
pre / post
7
By HenryTao – http://henrytao.me - https://mysquar.com
RESTRICT
E (element) A (attribute) C (class) M (comment)
Don’t recommend using comment
Using attribute if want to support IE
Can use prerender server for IE
8
By HenryTao – http://henrytao.me - https://mysquar.com
PRIORITY
Default priority for custom directive is 0
Priority of ngRepeat is 1000
9
Name ordering is last option
<div first second></div>
<div second first></div>
High priority run first
By HenryTao – http://henrytao.me - https://mysquar.com
TERMINAL
<div first second></div>
<div second first></div>
10
app.directive('first', function() {
return {
priority: 1,
link: function(scope, element, attrs) {
// never execute
}
};
}); app.directive('second', function() {
return {
priority: 2,
terminal: true,
link: function(scope, element, attrs) {
// execute & stop
}
};
});
By HenryTao – http://henrytao.me - https://mysquar.com
TEMPLATE
TEMPLATEURL
REPLACE
CONTROLLER
REQUIRE
11
angular.module(‘app', []).directive('powerSwitch', function() {
return {
controller: function($scope, $element, $attrs) {
$scope.state = 'on';
this.getState = function() { return $scope.state;};
}
};
}).directive('lightbulb', function() {
return {
require: '^powerSwitch',
link: function(scope, element, attrs, powerSwitchCtrl) {
scope.$watch('state', function() {
scope.bulb = powerSwitchCtrl.getState();
});
}
};
});
By HenryTao – http://henrytao.me - https://mysquar.com 12
CONTROLLER & REQUIRE
By HenryTao – http://henrytao.me - https://mysquar.com
Best PracticeUse controller when you want to
expose an API to
other directives,otherwise use link
13
By HenryTao – http://henrytao.me - https://mysquar.com 14
Advance
By HenryTao – http://henrytao.me - https://mysquar.com
Meditation
15
By HenryTao – http://henrytao.me - https://mysquar.com
SCOPE
Inheritance scopeng-controller, directive with scope:true, ng-include, ng-switch
isolate scope@ for value (1 way binding), = for 2 ways binding, & for method
transclude scope
ng-repeat type scope
16
By HenryTao – http://henrytao.me - https://mysquar.com
SCOPE - Inheritance
17
<div>
Inside Div One: {{ property }}
<div ng-controller="PropertyCtrl">
Inside Div Two: {{ property }}
</div>
</div
$rootScope
property
PropertyCtrl
property
x
By HenryTao – http://henrytao.me - https://mysquar.com
SCOPE – ngRepeat
18
<div>{{property}}</div>
<div ng-repeat="i in [1, 2, 3, 4, 5]">
<span>{{i}} - {{property}}</span>
</div>
$rootScope
property
ngRepeat
Interation 1
x
new: i
property
Interation 2 …
By HenryTao – http://henrytao.me - https://mysquar.com
SCOPE – Isolate
@ for value (1 way binding)
= for 2 ways binding
& for method
19
By HenryTao – http://henrytao.me - https://mysquar.com
SCOPE – Transclude
Same like isolate @
for value (1 way binding)
20
By HenryTao – http://henrytao.me - https://mysquar.com
TRANSCLUDE
Directive
with replace = falseDirective
with replace = true
Transclude
true
Transclude
element
21
By HenryTao – http://henrytao.me - https://mysquar.com
TRANSCLUDE
22
<div my-directive></div>
<span>hello moto</span>
<div my-directive></div>
<div my-directive>
<span>hello moto</span>
</div>
<div my-directive>
<span>hello moto</span>
</div>
<div ng-transclude><div>
<div my-directive>
<div ng-transclude>
<span>hello moto</span>
</div>
</div>
<div my-directive>
<div><span>hello
moto</span></div>
</div>
<div>
<span>hello moto</span>
</div>
By HenryTao – http://henrytao.me - https://mysquar.com
COMPILE VS LINK
23
return {
restrict: 'E',
compile: function(tElement, tAttrs){
console.log(name + ': compile');
return {
pre: function($scope, $element, $attrs){
console.log(name + ': pre link');
},
post: function($scope, $element, $attrs){
console.log(name + ': post link');
$scope.name = name;
}
}
}
}
<level-one>
<level-two>
<level-three>
{{name}}
</level-three>
</level-two>
</level-one>
What’s the order of console output?
By HenryTao – http://henrytao.me - https://mysquar.com
COMPILE VS LINK
24
By HenryTao – http://henrytao.me - https://mysquar.com
COMPILE VS LINK
25
By HenryTao – http://henrytao.me - https://mysquar.com
Hacking times
26
By HenryTao – http://henrytao.me - https://mysquar.com
Hacking times
27
1. Priority: create dependency directive
http://plnkr.co/edit/R47PiQQWPHS1gO5tt2DL?p=preview
2. Terminal: experiment
http://plnkr.co/edit/b8PnNsNvsFpvX2BGFsUC?p=preview
3. Controller & require: create switch and light
bulb directive
http://plnkr.co/edit/XqQTpsvcvTpczFe8Othi?p=preview
By HenryTao – http://henrytao.me - https://mysquar.com
Hacking times
28
4. Scope: experiment
http://plnkr.co/edit/dwknaG9t1nyFTISWCsuU?p=preview
5. Transclude: experiment transclude element
http://plnkr.co/edit/6yaz13IUodsbddku4ahA?p=preview
6. Nested directive: create 3 level directive
and print out the result order.
http://plnkr.co/edit/qXytDlRhD9wPrw3uKIVz?p=preview
Resources & References
The Hitchhiker’s Guide to the Directivehttps://amitgharat.wordpress.com/2013/06/08/the-hitchhikers-guide-to-the-directive/
Compile VS Link functions inside Directivehttp://www.jvandemo.com/the-nitty-gritty-of-compile-and-link-functions-inside-angularjs-directives/
AngularJS official $compile dochttps://docs.angularjs.org/api/ng/service/$compile
AngularJS Biblehttps://www.ng-book.com/
Understanding Scopehttps://github.com/angular/angular.js/wiki/Understanding-Scopes
Plnkr.co Sample CodePriority http://plnkr.co/edit/R47PiQQWPHS1gO5tt2DL?p=previewTerminal http://plnkr.co/edit/b8PnNsNvsFpvX2BGFsUC?p=previewDirective to Directive http://plnkr.co/edit/XqQTpsvcvTpczFe8Othi?p=previewScope http://plnkr.co/edit/dwknaG9t1nyFTISWCsuU?p=previewTransclude http://plnkr.co/edit/6yaz13IUodsbddku4ahA?p=previewCompile & Link http://plnkr.co/edit/qXytDlRhD9wPrw3uKIVz?p=preview
By HenryTao – http://henrytao.me - https://mysquar.com Images source: https://google.com & above resources 29
Resources & References
By HenryTao – http://henrytao.me - https://mysquar.com 30
Resources & References
By HenryTao – http://henrytao.me - https://mysquar.com 31
Q&A
By HenryTao – http://henrytao.me - https://mysquar.com 32
github.com/henrytao-me
angularify.org
https://github.com/henrytao-me/workshop-angular-directive