AngularJS custom directive
Download as PPTX, PDF•1 like•2,473 views
This document discusses AngularJS custom directives. It begins by defining directives as markers that tell Angular's compiler how to attach behaviors to DOM elements. It then lists some built-in directives like ngBind and ngModel. It outlines conventions for writing custom directives, such as using camelCase and dash-delimited attributes. Finally, it provides examples of different directive types (elements, attributes, comments, classes) and best practices like prefixing directive names and restricting directives to elements only when possible.
AngularJS custom directive
- 1. AngularJS Custom Directive Presented by Md. Masud Rana
- 2. Topics - What are directives? - Angular built in directives. - Types of directives. - Convention to write a custom directive. - Example of directive to start writing.
- 3. What are Directives? Directives are markers on a DOM element (such as an attribute, element name, comment or CSS class) that tell AngularJS's HTML compiler ($compile) to attach a specified behavior to that DOM element or even transform the DOM element and its children.
- 4. AngularJS Built in Directives Angular comes with a set of these built-in directives like ngBind, ngModel, and ngClass etc.
- 5. Conventions to Write a Directive - Case-sensitive (camelCase) normalized name(e.g. ngModel.) - HTML is case-insensitive, so directives in the DOM by lower-case forms, typically using dash-delimited attributes on DOM elements (e.g. ng-model) - Strip x- and data- from the front of the element/attributes - Convert the :, -, or _-delimited name to camelCase
- 6. Directive in HTML Template <div ng-controller="Controller"> Hello <input ng-model='name'> <hr/> <span ng-bind="name"></span> <br/> <span ng:bind="name"></span> <br/> <span ng_bind="name"></span> <br/> <span data-ng-bind="name"></span> <br/> <span x-ng-bind="name"></span> <br/> </div>
- 7. Best Practice Prefer using the dash-delimited format (e.g. ng- bind for ngBind). If you want to use an HTML validating tool, you can instead use the data- prefixed version (e.g. data-ng-bind for ngBind). The other forms shown above are accepted for legacy reasons but we advise you to avoid them.
- 8. Directive Types 1. Element names (HTML Tag) 2. Attributes 3. Class names and 4. Comments
- 9. Example of Directive Types <my-dir></my-dir> <span my-dir="exp"></span> <!-- directive: my-dir exp --> <span class="my-dir: exp;"></span> Best Practice: Prefer using directives via tag name and attributes over comment and class names. Doing so generally makes it easier to determine what directives a given element matches.
- 10. Instruction about Directives 1. Register a directive, use the module.directive 2. Directive name followed by a factory function 3. To avoid collisions with some future standard, it's best to prefix your own directive names. For instance, if you created a <carousel> directive, it would be problematic if HTML7 introduced the same element. A two or three letter prefix (e.g. btfCarousel) works well. 4. Do not prefix your own directives with ng
- 11. Writing Some Custom Directive 1. Replace static content Demo: https://jsfiddle.net/masudcsesust04/nj25aznt/ 2. Restricted directive Demo: https://jsfiddle.net/masudcsesust04/fr0mncdg/ 3. Isolated scope Demo: https://jsfiddle.net/masudcsesust04/9vo0339s/ 4. Wraps other elements Demo: https://jsfiddle.net/masudcsesust04/5wdm8xk0/ 5. Communicative directive Demo: https://jsfiddle.net/masudcsesust04/0s5uztax/
- 12. Any questions?
- 13. Thank you!