The technique of writing custom directive of AngularJS and some examples for better understanding.

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!