SlideShare a Scribd company logo
markers on a DOM element (attribute, element name, 
comment or CSS class); 
"... a way to tech HTML new tricks."; 
anything (within your app) ; 
a function that's attached to a DOM element: 
a whole execution environment; 
a micro-application; 
<!-- Built in directive --> 
<div ng-repeat="item in items"> </div> 
<!-- Custom directive --> 
<my-directive> </my-directive> 
<!-- OR --> 
<div my-directive> </div>
event handling; 
behavior management; 
template pre-processing and insertion; 
data-binding; 
UI Widgets; 
much more.
1. Declarative, Model-Driven Behaviour 
2. Modularity, Reusability across contexts 
3. Keep it local 
<!-- Imperative Way --> 
<button id="1" class="B C"></button> 
<!-- V.s. Declarative way--> 
<button my-action-handler></button>
Directive Names Angular uses a convention borrowed 
from other JS projects: names in HTML are hyphenated 
<my-directive> </my-directive> 
.directive('myDirective', function(){ 
}); 
while identifiers in the JS are camel-cased
angular 
.module('myApp', []) 
.directive('myDirective', function(){ 
return{ 
link: function(scope, lement, attrs, ctrl){ 
element.bind("mouseenter", function(){ 
element.css({color: 'red'}); 
}); 
}, 
require: '', 
controller: ['$scope', '$element', function($scope, $element){}], 
scope: false, 
transclude: false, 
restrict: 'E', 
template: "<div>Hello, World!</div>" 
}; 
}); 
Everything but is optional.
The params are supplied as args not injected: 
scope associated with the directive 
DOM element wrapped by jQLite 
an object containing the html attributes defined 
on the element 
Reference to controller object
Templates can be stored as strings on the 
property; 
They can also be loaded from a file, using 
property
Directives can be restricted to a specific context, so 
the accidentally usage can be avoided: 
- Element 
- Attribute 
- Class 
Can be used as a single string: ' '; 
Defaults to ' '
We have the option, in directives, of using either: 
the same scope (scope from the environment that 
directive lives) 
a child scope that inherits from current scope 
a new isolate scope 
.directive('myDirective', function(){ 
return { 
//scope: false // default, use local scope 
//scope: true // create a child of local scope 
//Create a new isolate scope 
scope: { 
} 
} 
});
Angular provides ways to bind the value of properties in 
isolate scope to attributes on the element, using special 
operators: 
- Local scope property 
- Bi-directional binding 
- Parent execution binding 
scope: { 
local1: '@attr1', 
local2: '=attr1', 
local3: '&attr3' 
}
Plunker link
Transclude allow to pass in an entire template, 
including its scope, to a directive. 
In order for scope to be passed in, the scope option 
must be isolated, , or set to . 
<div sidebox title="Links"> 
<ul> 
<li>First link</li> 
<li>Second link</li> 
</ul> 
</div> 
<script type="text/ng-template" id="directive.template.html"> 
{{ title }} 
angular.module('myApp', []) 
.directive('sidebox', function() { 
return { 
restrict: 'EA', 
scope: { 
title: '@' 
}, 
transclude: true, 
templateUrl: 'directive.template.html' 
});
The main use case for a controller is when we want to provide reusable 
behavior between directives 
As the link function is only available inside the current directive, any 
behavior defined within is not shareable 
Because a directive can require the controller of another directive, 
controllers are a good choice for placing actions that will be used by 
multiple directives.
The option can be set to a string or an array of 
strings. 
The string(s) contain the name of another directive. 
is used to provide the controller of the required 
directive as the fourth parameter of the current directive’s 
linking function 
The string(s) provided to the require option may optionally be prefixed with the 
following options: 
- If the required controller is not found on the directive provided, pass 
look upwards on its parent chain for the controller in the require option 
optionally require the controller and look up the parent chain for the 
controller
<level-one> 
<level-two> 
<level-three> 
Hello {{name}} 
</level-three> 
</level-two> 
</level-one> 
function createDirective(name){ 
return function(){ 
return { 
restrict: 'E', 
compile: function(tElem, tAttrs){ 
console.log(name + ': compile => ' + tElem.html()); 
return { 
pre: function(scope, iElem, iAttrs){ 
console.log(name + ': pre link => ' + iElem.html()); 
}, 
post: function(scope, iElem, iAttrs){ 
console.log(name + ': post link => ' + iElem.html()); 
} 
} 
} 
} 
} 
} 
angular.module('myModule', []) 
.directive('levelOne', createDirective('levelOne')) 
.directive('levelTwo', createDirective('levelTwo')) 
.directive('levelThree', createDirective('levelThree')); 
let AngularJS process three nested directives where each directive has its own 
, and function that logs a line to the console so we can identify them.
1. Angular start to process the DOM when it detects that the DOM is ready; 
2. it bumps into the element and knows from its directive definition that 
some action needs to be performed: 
1. Because a function is defined in the directive definition 
object, it is called and the element's DOM is passed as an argument to the 
function; 
2. Once the compile function of the directive has run, Angular 
recursively traverses deeper into the DOM and repeats the same compilation 
step for the and <level-three> elements.
1. After Angular travels down the DOM and has run all the 
functions, it traverses back up again and runs all associated 
functions. 
2. The DOM is now traversed in the opposite direction and thus the 
functions are called in reverse order. 
3. This reverse order guarantees that the functions of all 
child elements have run by the time the function of the 
parent element is run. 
4. Once Angular has called the function of a directive, it 
creates an instance element of the template element and 
provides a scope for the instance. 
5. So by the time the linking occurs, the instance element and scope 
are already available and they are passed by Angular as 
arguments to the function.
1. Angular provides a way to run code before any of the child 
element's functions have run; 
2. Angular calls in the original order; 
3. A function of an element is guaranteed to run before any 
or function of any of its child elements.
Use only to change the original DOM (template element) before 
Angular creates an instance of it and before a scope is created. 
Use to implement logic that runs when Angular has already 
compiled the child elements, but before any of the child 
element's and functions have been called. 
Use to execute logic, knowing that all child elements have been 
compiled and all and post-link functions of child 
elements have been executed.
The nitty-gritty of compile and link functions inside AngularJS directives
Plunker link
Angular Api Reference 
ng-book 
The nitty-gritty of compile and link functions inside 
AngularJS directives

More Related Content

What's hot

AngularJS Directives
AngularJS DirectivesAngularJS Directives
AngularJS Directives
Eyal Vardi
 
AngularJS for designers and developers
AngularJS for designers and developersAngularJS for designers and developers
AngularJS for designers and developers
Kai Koenig
 
Angular js
Angular jsAngular js
Angular js
Behind D Walls
 
AngularJs
AngularJsAngularJs
AngularJs
syam kumar kk
 
AngularJS Basics with Example
AngularJS Basics with ExampleAngularJS Basics with Example
AngularJS Basics with Example
Sergey Bolshchikov
 
Filters in AngularJS
Filters in AngularJSFilters in AngularJS
Filters in AngularJS
Brajesh Yadav
 
Scalable CSS You and Your Back-End Coders Can Love - @CSSConf Asia 2014
Scalable CSS You and Your Back-End Coders Can Love - @CSSConf Asia 2014Scalable CSS You and Your Back-End Coders Can Love - @CSSConf Asia 2014
Scalable CSS You and Your Back-End Coders Can Love - @CSSConf Asia 2014
Christian Lilley
 
AngularJS Architecture
AngularJS ArchitectureAngularJS Architecture
AngularJS Architecture
Eyal Vardi
 
AngularJs $provide API internals & circular dependency problem.
AngularJs $provide API internals & circular dependency problem.AngularJs $provide API internals & circular dependency problem.
AngularJs $provide API internals & circular dependency problem.
Yan Yankowski
 
AngularJS.part1
AngularJS.part1AngularJS.part1
AngularJS.part1
Andrey Kolodnitsky
 
Angular In Depth
Angular In DepthAngular In Depth
Angular In Depth
Mindfire Solutions
 
"Angular.js Concepts in Depth" by Aleksandar Simović
"Angular.js Concepts in Depth" by Aleksandar Simović"Angular.js Concepts in Depth" by Aleksandar Simović
"Angular.js Concepts in Depth" by Aleksandar Simović
JS Belgrade
 
AngularJS Internal
AngularJS InternalAngularJS Internal
AngularJS Internal
Eyal Vardi
 
Workshop 19: ReactJS Introduction
Workshop 19: ReactJS IntroductionWorkshop 19: ReactJS Introduction
Workshop 19: ReactJS Introduction
Visual Engineering
 
Workshop 8: Templating: Handlebars, DustJS
Workshop 8: Templating: Handlebars, DustJSWorkshop 8: Templating: Handlebars, DustJS
Workshop 8: Templating: Handlebars, DustJS
Visual Engineering
 
Workshop 2: JavaScript Design Patterns
Workshop 2: JavaScript Design PatternsWorkshop 2: JavaScript Design Patterns
Workshop 2: JavaScript Design Patterns
Visual Engineering
 
Opinionated AngularJS
Opinionated AngularJSOpinionated AngularJS
Opinionated AngularJS
prabhutech
 
Modular javascript
Modular javascriptModular javascript
Modular javascript
Zain Shaikh
 
Jquery Complete Presentation along with Javascript Basics
Jquery Complete Presentation along with Javascript BasicsJquery Complete Presentation along with Javascript Basics
Jquery Complete Presentation along with Javascript Basics
EPAM Systems
 
Building an End-to-End AngularJS Application
Building an End-to-End AngularJS ApplicationBuilding an End-to-End AngularJS Application
Building an End-to-End AngularJS Application
Dan Wahlin
 

What's hot (20)

AngularJS Directives
AngularJS DirectivesAngularJS Directives
AngularJS Directives
 
AngularJS for designers and developers
AngularJS for designers and developersAngularJS for designers and developers
AngularJS for designers and developers
 
Angular js
Angular jsAngular js
Angular js
 
AngularJs
AngularJsAngularJs
AngularJs
 
AngularJS Basics with Example
AngularJS Basics with ExampleAngularJS Basics with Example
AngularJS Basics with Example
 
Filters in AngularJS
Filters in AngularJSFilters in AngularJS
Filters in AngularJS
 
Scalable CSS You and Your Back-End Coders Can Love - @CSSConf Asia 2014
Scalable CSS You and Your Back-End Coders Can Love - @CSSConf Asia 2014Scalable CSS You and Your Back-End Coders Can Love - @CSSConf Asia 2014
Scalable CSS You and Your Back-End Coders Can Love - @CSSConf Asia 2014
 
AngularJS Architecture
AngularJS ArchitectureAngularJS Architecture
AngularJS Architecture
 
AngularJs $provide API internals & circular dependency problem.
AngularJs $provide API internals & circular dependency problem.AngularJs $provide API internals & circular dependency problem.
AngularJs $provide API internals & circular dependency problem.
 
AngularJS.part1
AngularJS.part1AngularJS.part1
AngularJS.part1
 
Angular In Depth
Angular In DepthAngular In Depth
Angular In Depth
 
"Angular.js Concepts in Depth" by Aleksandar Simović
"Angular.js Concepts in Depth" by Aleksandar Simović"Angular.js Concepts in Depth" by Aleksandar Simović
"Angular.js Concepts in Depth" by Aleksandar Simović
 
AngularJS Internal
AngularJS InternalAngularJS Internal
AngularJS Internal
 
Workshop 19: ReactJS Introduction
Workshop 19: ReactJS IntroductionWorkshop 19: ReactJS Introduction
Workshop 19: ReactJS Introduction
 
Workshop 8: Templating: Handlebars, DustJS
Workshop 8: Templating: Handlebars, DustJSWorkshop 8: Templating: Handlebars, DustJS
Workshop 8: Templating: Handlebars, DustJS
 
Workshop 2: JavaScript Design Patterns
Workshop 2: JavaScript Design PatternsWorkshop 2: JavaScript Design Patterns
Workshop 2: JavaScript Design Patterns
 
Opinionated AngularJS
Opinionated AngularJSOpinionated AngularJS
Opinionated AngularJS
 
Modular javascript
Modular javascriptModular javascript
Modular javascript
 
Jquery Complete Presentation along with Javascript Basics
Jquery Complete Presentation along with Javascript BasicsJquery Complete Presentation along with Javascript Basics
Jquery Complete Presentation along with Javascript Basics
 
Building an End-to-End AngularJS Application
Building an End-to-End AngularJS ApplicationBuilding an End-to-End AngularJS Application
Building an End-to-End AngularJS Application
 

Viewers also liked

AngularJS - dependency injection
AngularJS - dependency injectionAngularJS - dependency injection
AngularJS - dependency injection
Alexe Bogdan
 
Dependency Injection pattern in Angular
Dependency Injection pattern in AngularDependency Injection pattern in Angular
Dependency Injection pattern in Angular
Alexe Bogdan
 
Ajs ppt
Ajs pptAjs ppt
introduction to Angularjs basics
introduction to Angularjs basicsintroduction to Angularjs basics
introduction to Angularjs basics
Ravindra K
 
AngularJS intro
AngularJS introAngularJS intro
AngularJS intro
dizabl
 
AngularJS 101 - Everything you need to know to get started
AngularJS 101 - Everything you need to know to get startedAngularJS 101 - Everything you need to know to get started
AngularJS 101 - Everything you need to know to get started
Stéphane Bégaudeau
 
Introduction to Angularjs
Introduction to AngularjsIntroduction to Angularjs
Introduction to Angularjs
Manish Shekhawat
 

Viewers also liked (7)

AngularJS - dependency injection
AngularJS - dependency injectionAngularJS - dependency injection
AngularJS - dependency injection
 
Dependency Injection pattern in Angular
Dependency Injection pattern in AngularDependency Injection pattern in Angular
Dependency Injection pattern in Angular
 
Ajs ppt
Ajs pptAjs ppt
Ajs ppt
 
introduction to Angularjs basics
introduction to Angularjs basicsintroduction to Angularjs basics
introduction to Angularjs basics
 
AngularJS intro
AngularJS introAngularJS intro
AngularJS intro
 
AngularJS 101 - Everything you need to know to get started
AngularJS 101 - Everything you need to know to get startedAngularJS 101 - Everything you need to know to get started
AngularJS 101 - Everything you need to know to get started
 
Introduction to Angularjs
Introduction to AngularjsIntroduction to Angularjs
Introduction to Angularjs
 

Similar to Angular custom directives

AngularJS Custom Directives
AngularJS Custom DirectivesAngularJS Custom Directives
AngularJS Custom Directives
yprodev
 
Angular - Chapter 5 - Directives
 Angular - Chapter 5 - Directives Angular - Chapter 5 - Directives
Angular - Chapter 5 - Directives
WebStackAcademy
 
angularJs Workshop
angularJs WorkshopangularJs Workshop
angularJs Workshop
Ran Wahle
 
AngularJs Workshop SDP December 28th 2014
AngularJs Workshop SDP December 28th 2014AngularJs Workshop SDP December 28th 2014
AngularJs Workshop SDP December 28th 2014
Ran Wahle
 
Directives
DirectivesDirectives
Directives
Brajesh Yadav
 
AngularJS in practice
AngularJS in practiceAngularJS in practice
AngularJS in practice
Eugene Fidelin
 
Angular2 and You
Angular2 and YouAngular2 and You
Angular2 and You
Joseph Jorden
 
Angular Presentation
Angular PresentationAngular Presentation
Angular Presentation
Adam Moore
 
Angular js-crash-course
Angular js-crash-courseAngular js-crash-course
Angular js-crash-course
Keith Bloomfield
 
Get rid of controllers in angular 1.5.x start using component directives
Get rid of controllers in angular 1.5.x start using component directivesGet rid of controllers in angular 1.5.x start using component directives
Get rid of controllers in angular 1.5.x start using component directives
Marios Fakiolas
 
"Inside The AngularJS Directive Compiler" by Tero Parviainen
"Inside The AngularJS Directive Compiler" by Tero Parviainen"Inside The AngularJS Directive Compiler" by Tero Parviainen
"Inside The AngularJS Directive Compiler" by Tero Parviainen
Fwdays
 
Angular Intermediate
Angular IntermediateAngular Intermediate
Angular Intermediate
LinkMe Srl
 
AngularJs Crash Course
AngularJs Crash CourseAngularJs Crash Course
AngularJs Crash Course
Keith Bloomfield
 
Workshop 14: AngularJS Parte III
Workshop 14: AngularJS Parte IIIWorkshop 14: AngularJS Parte III
Workshop 14: AngularJS Parte III
Visual Engineering
 
Intoduction to Angularjs
Intoduction to AngularjsIntoduction to Angularjs
Intoduction to Angularjs
Gaurav Agrawal
 
Mastering the Lightning Framework - Part 1
Mastering the Lightning Framework - Part 1Mastering the Lightning Framework - Part 1
Mastering the Lightning Framework - Part 1
Salesforce Developers
 
Introduction to Angular 2
Introduction to Angular 2Introduction to Angular 2
Introduction to Angular 2
Knoldus Inc.
 
Angular workshop - Full Development Guide
Angular workshop - Full Development GuideAngular workshop - Full Development Guide
Angular workshop - Full Development Guide
Nitin Giri
 
React Hooks Best Practices in 2022.pptx
React Hooks Best Practices in 2022.pptxReact Hooks Best Practices in 2022.pptx
React Hooks Best Practices in 2022.pptx
BOSC Tech Labs
 
AngularJS Fundamentals + WebAPI
AngularJS Fundamentals + WebAPIAngularJS Fundamentals + WebAPI
AngularJS Fundamentals + WebAPI
Eric Wise
 

Similar to Angular custom directives (20)

AngularJS Custom Directives
AngularJS Custom DirectivesAngularJS Custom Directives
AngularJS Custom Directives
 
Angular - Chapter 5 - Directives
 Angular - Chapter 5 - Directives Angular - Chapter 5 - Directives
Angular - Chapter 5 - Directives
 
angularJs Workshop
angularJs WorkshopangularJs Workshop
angularJs Workshop
 
AngularJs Workshop SDP December 28th 2014
AngularJs Workshop SDP December 28th 2014AngularJs Workshop SDP December 28th 2014
AngularJs Workshop SDP December 28th 2014
 
Directives
DirectivesDirectives
Directives
 
AngularJS in practice
AngularJS in practiceAngularJS in practice
AngularJS in practice
 
Angular2 and You
Angular2 and YouAngular2 and You
Angular2 and You
 
Angular Presentation
Angular PresentationAngular Presentation
Angular Presentation
 
Angular js-crash-course
Angular js-crash-courseAngular js-crash-course
Angular js-crash-course
 
Get rid of controllers in angular 1.5.x start using component directives
Get rid of controllers in angular 1.5.x start using component directivesGet rid of controllers in angular 1.5.x start using component directives
Get rid of controllers in angular 1.5.x start using component directives
 
"Inside The AngularJS Directive Compiler" by Tero Parviainen
"Inside The AngularJS Directive Compiler" by Tero Parviainen"Inside The AngularJS Directive Compiler" by Tero Parviainen
"Inside The AngularJS Directive Compiler" by Tero Parviainen
 
Angular Intermediate
Angular IntermediateAngular Intermediate
Angular Intermediate
 
AngularJs Crash Course
AngularJs Crash CourseAngularJs Crash Course
AngularJs Crash Course
 
Workshop 14: AngularJS Parte III
Workshop 14: AngularJS Parte IIIWorkshop 14: AngularJS Parte III
Workshop 14: AngularJS Parte III
 
Intoduction to Angularjs
Intoduction to AngularjsIntoduction to Angularjs
Intoduction to Angularjs
 
Mastering the Lightning Framework - Part 1
Mastering the Lightning Framework - Part 1Mastering the Lightning Framework - Part 1
Mastering the Lightning Framework - Part 1
 
Introduction to Angular 2
Introduction to Angular 2Introduction to Angular 2
Introduction to Angular 2
 
Angular workshop - Full Development Guide
Angular workshop - Full Development GuideAngular workshop - Full Development Guide
Angular workshop - Full Development Guide
 
React Hooks Best Practices in 2022.pptx
React Hooks Best Practices in 2022.pptxReact Hooks Best Practices in 2022.pptx
React Hooks Best Practices in 2022.pptx
 
AngularJS Fundamentals + WebAPI
AngularJS Fundamentals + WebAPIAngularJS Fundamentals + WebAPI
AngularJS Fundamentals + WebAPI
 

More from Alexe Bogdan

Angular promises and http
Angular promises and httpAngular promises and http
Angular promises and http
Alexe Bogdan
 
Client Side MVC & Angular
Client Side MVC & AngularClient Side MVC & Angular
Client Side MVC & Angular
Alexe Bogdan
 
HTML & JavaScript Introduction
HTML & JavaScript IntroductionHTML & JavaScript Introduction
HTML & JavaScript Introduction
Alexe Bogdan
 
Angular server-side communication
Angular server-side communicationAngular server-side communication
Angular server-side communication
Alexe Bogdan
 
Angular Promises and Advanced Routing
Angular Promises and Advanced RoutingAngular Promises and Advanced Routing
Angular Promises and Advanced Routing
Alexe Bogdan
 
AngularJS - introduction & how it works?
AngularJS - introduction & how it works?AngularJS - introduction & how it works?
AngularJS - introduction & how it works?
Alexe Bogdan
 

More from Alexe Bogdan (6)

Angular promises and http
Angular promises and httpAngular promises and http
Angular promises and http
 
Client Side MVC & Angular
Client Side MVC & AngularClient Side MVC & Angular
Client Side MVC & Angular
 
HTML & JavaScript Introduction
HTML & JavaScript IntroductionHTML & JavaScript Introduction
HTML & JavaScript Introduction
 
Angular server-side communication
Angular server-side communicationAngular server-side communication
Angular server-side communication
 
Angular Promises and Advanced Routing
Angular Promises and Advanced RoutingAngular Promises and Advanced Routing
Angular Promises and Advanced Routing
 
AngularJS - introduction & how it works?
AngularJS - introduction & how it works?AngularJS - introduction & how it works?
AngularJS - introduction & how it works?
 

Recently uploaded

一比一原版(CSU毕业证)加利福尼亚州立大学毕业证成绩单专业办理
一比一原版(CSU毕业证)加利福尼亚州立大学毕业证成绩单专业办理一比一原版(CSU毕业证)加利福尼亚州立大学毕业证成绩单专业办理
一比一原版(CSU毕业证)加利福尼亚州立大学毕业证成绩单专业办理
ufdana
 
学位认证网(DU毕业证)迪肯大学毕业证成绩单一比一原版制作
学位认证网(DU毕业证)迪肯大学毕业证成绩单一比一原版制作学位认证网(DU毕业证)迪肯大学毕业证成绩单一比一原版制作
学位认证网(DU毕业证)迪肯大学毕业证成绩单一比一原版制作
zyfovom
 
Internet of Things in Manufacturing: Revolutionizing Efficiency & Quality | C...
Internet of Things in Manufacturing: Revolutionizing Efficiency & Quality | C...Internet of Things in Manufacturing: Revolutionizing Efficiency & Quality | C...
Internet of Things in Manufacturing: Revolutionizing Efficiency & Quality | C...
CIOWomenMagazine
 
Italy Agriculture Equipment Market Outlook to 2027
Italy Agriculture Equipment Market Outlook to 2027Italy Agriculture Equipment Market Outlook to 2027
Italy Agriculture Equipment Market Outlook to 2027
harveenkaur52
 
1比1复刻(bath毕业证书)英国巴斯大学毕业证学位证原版一模一样
1比1复刻(bath毕业证书)英国巴斯大学毕业证学位证原版一模一样1比1复刻(bath毕业证书)英国巴斯大学毕业证学位证原版一模一样
1比1复刻(bath毕业证书)英国巴斯大学毕业证学位证原版一模一样
3ipehhoa
 
manuaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaal
manuaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaalmanuaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaal
manuaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaal
wolfsoftcompanyco
 
Explore-Insanony: Watch Instagram Stories Secretly
Explore-Insanony: Watch Instagram Stories SecretlyExplore-Insanony: Watch Instagram Stories Secretly
Explore-Insanony: Watch Instagram Stories Secretly
Trending Blogers
 
Gen Z and the marketplaces - let's translate their needs
Gen Z and the marketplaces - let's translate their needsGen Z and the marketplaces - let's translate their needs
Gen Z and the marketplaces - let's translate their needs
Laura Szabó
 
假文凭国外(Adelaide毕业证)澳大利亚国立大学毕业证成绩单办理
假文凭国外(Adelaide毕业证)澳大利亚国立大学毕业证成绩单办理假文凭国外(Adelaide毕业证)澳大利亚国立大学毕业证成绩单办理
假文凭国外(Adelaide毕业证)澳大利亚国立大学毕业证成绩单办理
cuobya
 
Ready to Unlock the Power of Blockchain!
Ready to Unlock the Power of Blockchain!Ready to Unlock the Power of Blockchain!
Ready to Unlock the Power of Blockchain!
Toptal Tech
 
成绩单ps(UST毕业证)圣托马斯大学毕业证成绩单快速办理
成绩单ps(UST毕业证)圣托马斯大学毕业证成绩单快速办理成绩单ps(UST毕业证)圣托马斯大学毕业证成绩单快速办理
成绩单ps(UST毕业证)圣托马斯大学毕业证成绩单快速办理
ysasp1
 
[HUN][hackersuli] Red Teaming alapok 2024
[HUN][hackersuli] Red Teaming alapok 2024[HUN][hackersuli] Red Teaming alapok 2024
[HUN][hackersuli] Red Teaming alapok 2024
hackersuli
 
重新申请毕业证书(RMIT毕业证)皇家墨尔本理工大学毕业证成绩单精仿办理
重新申请毕业证书(RMIT毕业证)皇家墨尔本理工大学毕业证成绩单精仿办理重新申请毕业证书(RMIT毕业证)皇家墨尔本理工大学毕业证成绩单精仿办理
重新申请毕业证书(RMIT毕业证)皇家墨尔本理工大学毕业证成绩单精仿办理
vmemo1
 
APNIC Foundation, presented by Ellisha Heppner at the PNG DNS Forum 2024
APNIC Foundation, presented by Ellisha Heppner at the PNG DNS Forum 2024APNIC Foundation, presented by Ellisha Heppner at the PNG DNS Forum 2024
APNIC Foundation, presented by Ellisha Heppner at the PNG DNS Forum 2024
APNIC
 
不能毕业如何获得(USYD毕业证)悉尼大学毕业证成绩单一比一原版制作
不能毕业如何获得(USYD毕业证)悉尼大学毕业证成绩单一比一原版制作不能毕业如何获得(USYD毕业证)悉尼大学毕业证成绩单一比一原版制作
不能毕业如何获得(USYD毕业证)悉尼大学毕业证成绩单一比一原版制作
bseovas
 
办理毕业证(UPenn毕业证)宾夕法尼亚大学毕业证成绩单快速办理
办理毕业证(UPenn毕业证)宾夕法尼亚大学毕业证成绩单快速办理办理毕业证(UPenn毕业证)宾夕法尼亚大学毕业证成绩单快速办理
办理毕业证(UPenn毕业证)宾夕法尼亚大学毕业证成绩单快速办理
uehowe
 
一比一原版(LBS毕业证)伦敦商学院毕业证成绩单专业办理
一比一原版(LBS毕业证)伦敦商学院毕业证成绩单专业办理一比一原版(LBS毕业证)伦敦商学院毕业证成绩单专业办理
一比一原版(LBS毕业证)伦敦商学院毕业证成绩单专业办理
eutxy
 
制作毕业证书(ANU毕业证)莫纳什大学毕业证成绩单官方原版办理
制作毕业证书(ANU毕业证)莫纳什大学毕业证成绩单官方原版办理制作毕业证书(ANU毕业证)莫纳什大学毕业证成绩单官方原版办理
制作毕业证书(ANU毕业证)莫纳什大学毕业证成绩单官方原版办理
cuobya
 
制作原版1:1(Monash毕业证)莫纳什大学毕业证成绩单办理假
制作原版1:1(Monash毕业证)莫纳什大学毕业证成绩单办理假制作原版1:1(Monash毕业证)莫纳什大学毕业证成绩单办理假
制作原版1:1(Monash毕业证)莫纳什大学毕业证成绩单办理假
ukwwuq
 
可查真实(Monash毕业证)西澳大学毕业证成绩单退学买
可查真实(Monash毕业证)西澳大学毕业证成绩单退学买可查真实(Monash毕业证)西澳大学毕业证成绩单退学买
可查真实(Monash毕业证)西澳大学毕业证成绩单退学买
cuobya
 

Recently uploaded (20)

一比一原版(CSU毕业证)加利福尼亚州立大学毕业证成绩单专业办理
一比一原版(CSU毕业证)加利福尼亚州立大学毕业证成绩单专业办理一比一原版(CSU毕业证)加利福尼亚州立大学毕业证成绩单专业办理
一比一原版(CSU毕业证)加利福尼亚州立大学毕业证成绩单专业办理
 
学位认证网(DU毕业证)迪肯大学毕业证成绩单一比一原版制作
学位认证网(DU毕业证)迪肯大学毕业证成绩单一比一原版制作学位认证网(DU毕业证)迪肯大学毕业证成绩单一比一原版制作
学位认证网(DU毕业证)迪肯大学毕业证成绩单一比一原版制作
 
Internet of Things in Manufacturing: Revolutionizing Efficiency & Quality | C...
Internet of Things in Manufacturing: Revolutionizing Efficiency & Quality | C...Internet of Things in Manufacturing: Revolutionizing Efficiency & Quality | C...
Internet of Things in Manufacturing: Revolutionizing Efficiency & Quality | C...
 
Italy Agriculture Equipment Market Outlook to 2027
Italy Agriculture Equipment Market Outlook to 2027Italy Agriculture Equipment Market Outlook to 2027
Italy Agriculture Equipment Market Outlook to 2027
 
1比1复刻(bath毕业证书)英国巴斯大学毕业证学位证原版一模一样
1比1复刻(bath毕业证书)英国巴斯大学毕业证学位证原版一模一样1比1复刻(bath毕业证书)英国巴斯大学毕业证学位证原版一模一样
1比1复刻(bath毕业证书)英国巴斯大学毕业证学位证原版一模一样
 
manuaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaal
manuaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaalmanuaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaal
manuaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaal
 
Explore-Insanony: Watch Instagram Stories Secretly
Explore-Insanony: Watch Instagram Stories SecretlyExplore-Insanony: Watch Instagram Stories Secretly
Explore-Insanony: Watch Instagram Stories Secretly
 
Gen Z and the marketplaces - let's translate their needs
Gen Z and the marketplaces - let's translate their needsGen Z and the marketplaces - let's translate their needs
Gen Z and the marketplaces - let's translate their needs
 
假文凭国外(Adelaide毕业证)澳大利亚国立大学毕业证成绩单办理
假文凭国外(Adelaide毕业证)澳大利亚国立大学毕业证成绩单办理假文凭国外(Adelaide毕业证)澳大利亚国立大学毕业证成绩单办理
假文凭国外(Adelaide毕业证)澳大利亚国立大学毕业证成绩单办理
 
Ready to Unlock the Power of Blockchain!
Ready to Unlock the Power of Blockchain!Ready to Unlock the Power of Blockchain!
Ready to Unlock the Power of Blockchain!
 
成绩单ps(UST毕业证)圣托马斯大学毕业证成绩单快速办理
成绩单ps(UST毕业证)圣托马斯大学毕业证成绩单快速办理成绩单ps(UST毕业证)圣托马斯大学毕业证成绩单快速办理
成绩单ps(UST毕业证)圣托马斯大学毕业证成绩单快速办理
 
[HUN][hackersuli] Red Teaming alapok 2024
[HUN][hackersuli] Red Teaming alapok 2024[HUN][hackersuli] Red Teaming alapok 2024
[HUN][hackersuli] Red Teaming alapok 2024
 
重新申请毕业证书(RMIT毕业证)皇家墨尔本理工大学毕业证成绩单精仿办理
重新申请毕业证书(RMIT毕业证)皇家墨尔本理工大学毕业证成绩单精仿办理重新申请毕业证书(RMIT毕业证)皇家墨尔本理工大学毕业证成绩单精仿办理
重新申请毕业证书(RMIT毕业证)皇家墨尔本理工大学毕业证成绩单精仿办理
 
APNIC Foundation, presented by Ellisha Heppner at the PNG DNS Forum 2024
APNIC Foundation, presented by Ellisha Heppner at the PNG DNS Forum 2024APNIC Foundation, presented by Ellisha Heppner at the PNG DNS Forum 2024
APNIC Foundation, presented by Ellisha Heppner at the PNG DNS Forum 2024
 
不能毕业如何获得(USYD毕业证)悉尼大学毕业证成绩单一比一原版制作
不能毕业如何获得(USYD毕业证)悉尼大学毕业证成绩单一比一原版制作不能毕业如何获得(USYD毕业证)悉尼大学毕业证成绩单一比一原版制作
不能毕业如何获得(USYD毕业证)悉尼大学毕业证成绩单一比一原版制作
 
办理毕业证(UPenn毕业证)宾夕法尼亚大学毕业证成绩单快速办理
办理毕业证(UPenn毕业证)宾夕法尼亚大学毕业证成绩单快速办理办理毕业证(UPenn毕业证)宾夕法尼亚大学毕业证成绩单快速办理
办理毕业证(UPenn毕业证)宾夕法尼亚大学毕业证成绩单快速办理
 
一比一原版(LBS毕业证)伦敦商学院毕业证成绩单专业办理
一比一原版(LBS毕业证)伦敦商学院毕业证成绩单专业办理一比一原版(LBS毕业证)伦敦商学院毕业证成绩单专业办理
一比一原版(LBS毕业证)伦敦商学院毕业证成绩单专业办理
 
制作毕业证书(ANU毕业证)莫纳什大学毕业证成绩单官方原版办理
制作毕业证书(ANU毕业证)莫纳什大学毕业证成绩单官方原版办理制作毕业证书(ANU毕业证)莫纳什大学毕业证成绩单官方原版办理
制作毕业证书(ANU毕业证)莫纳什大学毕业证成绩单官方原版办理
 
制作原版1:1(Monash毕业证)莫纳什大学毕业证成绩单办理假
制作原版1:1(Monash毕业证)莫纳什大学毕业证成绩单办理假制作原版1:1(Monash毕业证)莫纳什大学毕业证成绩单办理假
制作原版1:1(Monash毕业证)莫纳什大学毕业证成绩单办理假
 
可查真实(Monash毕业证)西澳大学毕业证成绩单退学买
可查真实(Monash毕业证)西澳大学毕业证成绩单退学买可查真实(Monash毕业证)西澳大学毕业证成绩单退学买
可查真实(Monash毕业证)西澳大学毕业证成绩单退学买
 

Angular custom directives

  • 1.
  • 2. markers on a DOM element (attribute, element name, comment or CSS class); "... a way to tech HTML new tricks."; anything (within your app) ; a function that's attached to a DOM element: a whole execution environment; a micro-application; <!-- Built in directive --> <div ng-repeat="item in items"> </div> <!-- Custom directive --> <my-directive> </my-directive> <!-- OR --> <div my-directive> </div>
  • 3. event handling; behavior management; template pre-processing and insertion; data-binding; UI Widgets; much more.
  • 4. 1. Declarative, Model-Driven Behaviour 2. Modularity, Reusability across contexts 3. Keep it local <!-- Imperative Way --> <button id="1" class="B C"></button> <!-- V.s. Declarative way--> <button my-action-handler></button>
  • 5. Directive Names Angular uses a convention borrowed from other JS projects: names in HTML are hyphenated <my-directive> </my-directive> .directive('myDirective', function(){ }); while identifiers in the JS are camel-cased
  • 6. angular .module('myApp', []) .directive('myDirective', function(){ return{ link: function(scope, lement, attrs, ctrl){ element.bind("mouseenter", function(){ element.css({color: 'red'}); }); }, require: '', controller: ['$scope', '$element', function($scope, $element){}], scope: false, transclude: false, restrict: 'E', template: "<div>Hello, World!</div>" }; }); Everything but is optional.
  • 7. The params are supplied as args not injected: scope associated with the directive DOM element wrapped by jQLite an object containing the html attributes defined on the element Reference to controller object
  • 8. Templates can be stored as strings on the property; They can also be loaded from a file, using property
  • 9. Directives can be restricted to a specific context, so the accidentally usage can be avoided: - Element - Attribute - Class Can be used as a single string: ' '; Defaults to ' '
  • 10. We have the option, in directives, of using either: the same scope (scope from the environment that directive lives) a child scope that inherits from current scope a new isolate scope .directive('myDirective', function(){ return { //scope: false // default, use local scope //scope: true // create a child of local scope //Create a new isolate scope scope: { } } });
  • 11. Angular provides ways to bind the value of properties in isolate scope to attributes on the element, using special operators: - Local scope property - Bi-directional binding - Parent execution binding scope: { local1: '@attr1', local2: '=attr1', local3: '&attr3' }
  • 13. Transclude allow to pass in an entire template, including its scope, to a directive. In order for scope to be passed in, the scope option must be isolated, , or set to . <div sidebox title="Links"> <ul> <li>First link</li> <li>Second link</li> </ul> </div> <script type="text/ng-template" id="directive.template.html"> {{ title }} angular.module('myApp', []) .directive('sidebox', function() { return { restrict: 'EA', scope: { title: '@' }, transclude: true, templateUrl: 'directive.template.html' });
  • 14. The main use case for a controller is when we want to provide reusable behavior between directives As the link function is only available inside the current directive, any behavior defined within is not shareable Because a directive can require the controller of another directive, controllers are a good choice for placing actions that will be used by multiple directives.
  • 15. The option can be set to a string or an array of strings. The string(s) contain the name of another directive. is used to provide the controller of the required directive as the fourth parameter of the current directive’s linking function The string(s) provided to the require option may optionally be prefixed with the following options: - If the required controller is not found on the directive provided, pass look upwards on its parent chain for the controller in the require option optionally require the controller and look up the parent chain for the controller
  • 16.
  • 17. <level-one> <level-two> <level-three> Hello {{name}} </level-three> </level-two> </level-one> function createDirective(name){ return function(){ return { restrict: 'E', compile: function(tElem, tAttrs){ console.log(name + ': compile => ' + tElem.html()); return { pre: function(scope, iElem, iAttrs){ console.log(name + ': pre link => ' + iElem.html()); }, post: function(scope, iElem, iAttrs){ console.log(name + ': post link => ' + iElem.html()); } } } } } } angular.module('myModule', []) .directive('levelOne', createDirective('levelOne')) .directive('levelTwo', createDirective('levelTwo')) .directive('levelThree', createDirective('levelThree')); let AngularJS process three nested directives where each directive has its own , and function that logs a line to the console so we can identify them.
  • 18.
  • 19.
  • 20. 1. Angular start to process the DOM when it detects that the DOM is ready; 2. it bumps into the element and knows from its directive definition that some action needs to be performed: 1. Because a function is defined in the directive definition object, it is called and the element's DOM is passed as an argument to the function; 2. Once the compile function of the directive has run, Angular recursively traverses deeper into the DOM and repeats the same compilation step for the and <level-three> elements.
  • 21. 1. After Angular travels down the DOM and has run all the functions, it traverses back up again and runs all associated functions. 2. The DOM is now traversed in the opposite direction and thus the functions are called in reverse order. 3. This reverse order guarantees that the functions of all child elements have run by the time the function of the parent element is run. 4. Once Angular has called the function of a directive, it creates an instance element of the template element and provides a scope for the instance. 5. So by the time the linking occurs, the instance element and scope are already available and they are passed by Angular as arguments to the function.
  • 22.
  • 23. 1. Angular provides a way to run code before any of the child element's functions have run; 2. Angular calls in the original order; 3. A function of an element is guaranteed to run before any or function of any of its child elements.
  • 24. Use only to change the original DOM (template element) before Angular creates an instance of it and before a scope is created. Use to implement logic that runs when Angular has already compiled the child elements, but before any of the child element's and functions have been called. Use to execute logic, knowing that all child elements have been compiled and all and post-link functions of child elements have been executed.
  • 25. The nitty-gritty of compile and link functions inside AngularJS directives
  • 27. Angular Api Reference ng-book The nitty-gritty of compile and link functions inside AngularJS directives