AngularJS - Introductions to Directives
•
0 likes•924 views
Introductions to Directives - common things
Recommended
More Related Content
Viewers also liked
Viewers also liked (20)
Similar to AngularJS - Introductions to Directives
Similar to AngularJS - Introductions to Directives (20)
Recently uploaded
Recently uploaded (20)
AngularJS - Introductions to Directives
- 2. Intro Custom directive structure Restrict Template Replace Scope Transclude Link Compile Bootstrap UI examples 2
- 4. 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
- 5. A – attribute, Example: <div my-directive></div> E – element, Example: <my-directive></ my-directive> C - class Example: <span class=“my-directive”></ span> 5
- 6. Template – inline string Example: '<p style="color: {{color}}">Hello World</p>‘ TemplateUrl – url to template.html Example:‘/views/template.html’ 6
- 7. Replace: true Example: <my-directive></ my-directive> => <div>Hello world</div> Replace: false Example: <my-directive></ my-directive> => <my-directive> <div>Hello world</div> </my-directive> 7
- 8. 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
- 9. 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
- 10. Transclude: true Example: <my-directive>Hello</my-directive> Template: <div ng-transclude></div> On page: <div>Hello</div> 10
- 11. link: function(scope, elem, attrs) { scope.color = "white"; } 11
- 12. compile: function(tElem,attrs) { //do optional DOM transformation here return function(scope,elem,attrs) { //linking function here }; } 12
- 13. ? 13