AngularJS - Introductions to Directives
-
Upload
egor-miasnikov -
Category
Software
-
view
287 -
download
2
description
Transcript of AngularJS - Introductions to Directives
![Page 1: AngularJS - Introductions to Directives](https://reader033.fdocuments.in/reader033/viewer/2022042714/554f6757b4c9058a148b4c13/html5/thumbnails/1.jpg)
Egor Miasnikov 1
![Page 2: AngularJS - Introductions to Directives](https://reader033.fdocuments.in/reader033/viewer/2022042714/554f6757b4c9058a148b4c13/html5/thumbnails/2.jpg)
Intro
Custom directive structure
Restrict
Template
Replace
Scope
Transclude
Link
Compile
Bootstrap UI examples
2
![Page 3: AngularJS - Introductions to Directives](https://reader033.fdocuments.in/reader033/viewer/2022042714/554f6757b4c9058a148b4c13/html5/thumbnails/3.jpg)
<body>
<my-awesome-site></my-awesome-site>
</body>
3
![Page 4: AngularJS - Introductions to Directives](https://reader033.fdocuments.in/reader033/viewer/2022042714/554f6757b4c9058a148b4c13/html5/thumbnails/4.jpg)
app.directive(‘myDirective', function() {
return {
restrict: 'AEC',
replace: true,
template: '<p style="color: {{color}}">Hello World</p>',
link: function(scope, elem, attrs) {
…
},
compile: function(tElem,attrs) {
…
}
};
});
4
![Page 5: AngularJS - Introductions to Directives](https://reader033.fdocuments.in/reader033/viewer/2022042714/554f6757b4c9058a148b4c13/html5/thumbnails/5.jpg)
A – attribute,
Example: <div my-directive></div>
E – element,
Example: <my-directive></ my-directive>
C - class
Example: <span class=“my-directive”></ span>
5
![Page 6: AngularJS - Introductions to Directives](https://reader033.fdocuments.in/reader033/viewer/2022042714/554f6757b4c9058a148b4c13/html5/thumbnails/6.jpg)
Template – inline string
Example: '<p style="color: {{color}}">Hello World</p>‘
TemplateUrl – url to template.html
Example: ‘/views/template.html’
6
![Page 7: AngularJS - Introductions to Directives](https://reader033.fdocuments.in/reader033/viewer/2022042714/554f6757b4c9058a148b4c13/html5/thumbnails/7.jpg)
Replace: trueExample: <my-directive></ my-directive>
=> <div>Hello world</div>
Replace: falseExample: <my-directive></ my-directive>
=> <my-directive>
<div>Hello world</div>
</my-directive>
7
![Page 8: AngularJS - Introductions to Directives](https://reader033.fdocuments.in/reader033/viewer/2022042714/554f6757b4c9058a148b4c13/html5/thumbnails/8.jpg)
Scope: true
Use a child scope that inherits from parent
Scope: false //default
Don’t have any scopes, only parent
Scope: {}
Use a new isolated scope
8
![Page 9: AngularJS - Introductions to Directives](https://reader033.fdocuments.in/reader033/viewer/2022042714/554f6757b4c9058a148b4c13/html5/thumbnails/9.jpg)
Scope: {
variable1: ‘@’,
variable2: ‘=‘,
func: ‘&’
}
Use “@” for One Way Text Binding
Use “=“ for Two Way Binding
Use “&” to Execute Functions in the Parent Scope
Example: Link
9
![Page 10: AngularJS - Introductions to Directives](https://reader033.fdocuments.in/reader033/viewer/2022042714/554f6757b4c9058a148b4c13/html5/thumbnails/10.jpg)
Transclude: true
Example: <my-directive>Hello</my-directive>
Template: <div ng-transclude></div>
On page: <div>Hello</div>
10
![Page 11: AngularJS - Introductions to Directives](https://reader033.fdocuments.in/reader033/viewer/2022042714/554f6757b4c9058a148b4c13/html5/thumbnails/11.jpg)
link: function(scope, elem, attrs) {
scope.color = "white";
}
11
![Page 12: AngularJS - Introductions to Directives](https://reader033.fdocuments.in/reader033/viewer/2022042714/554f6757b4c9058a148b4c13/html5/thumbnails/12.jpg)
compile: function(tElem,attrs) {
//do optional DOM transformation here
return function(scope,elem,attrs) {
//linking function here
};
}
12
![Page 13: AngularJS - Introductions to Directives](https://reader033.fdocuments.in/reader033/viewer/2022042714/554f6757b4c9058a148b4c13/html5/thumbnails/13.jpg)
?
13