angularjs - introductions to directives
DESCRIPTION
Introductions to Directives - common thingsTRANSCRIPT
Egor Miasnikov 1
Intro
Custom directive structure
Restrict
Template
Replace
Scope
Transclude
Link
Compile
Bootstrap UI examples
2
<body>
<my-awesome-site></my-awesome-site>
</body>
3
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
A – attribute,
Example: <div my-directive></div>
E – element,
Example: <my-directive></ my-directive>
C - class
Example: <span class=“my-directive”></ span>
5
Template – inline string
Example: '<p style="color: {{color}}">Hello World</p>‘
TemplateUrl – url to template.html
Example: ‘/views/template.html’
6
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
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
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
Transclude: true
Example: <my-directive>Hello</my-directive>
Template: <div ng-transclude></div>
On page: <div>Hello</div>
10
link: function(scope, elem, attrs) {
scope.color = "white";
}
11
compile: function(tElem,attrs) {
//do optional DOM transformation here
return function(scope,elem,attrs) {
//linking function here
};
}
12
?
13