ANGULARJS CUSTOM DIRECTIVE

Directive in angularJS

Directives in AngularJS encapsulate all the behavioral properties and functionalities of an element in a semantic way, thereby keeping all of the functionality grouped together. This helps to keep track of changes of one HTML section in one place rather than tracking the changes on a global level in a script.

Custom Directive in angularJS

Custom angularjs directives are used to extend functionality of html by creating new html elements or custom attributes to provide certain behavior to an html tag.

1. multiElement – set to true and any DOM nodes between the start and end of the directive name will be collected and grouped together as directive elements
2. priority – allows specification of the order to apply directives when multiple directives are defined on a single DOM element. Directives with higher numbers are compiled first.
3. terminal – set to true and the current priority will be the last set of directives to execute
4. scope – sets scope of the directive
5. bind to controller – binds scope properties directly to directive controller
6. controller – controller constructor function
7. require – require another directive and inject its controller as the fourth argument to the linking function
8. controllerAs – name reference to the controller in the directive scope to allow the controller to be referenced from the directive template.
9. restrict – restrict directive to Element, Attribute, Class, or Comment
10. templateNameSpace – sets document type used by directive template: html, svg, or math. html is the default
11. template – html markup that defaults to replacing the content of the directive’s element, or wraps the contents of the directive element if transclude is true
12. templateUrl – url provided asynchronously for the template
13. transclude – Extract the contents of the element where the directive appears and make it available to the directive. The contents are compiled and provided to the directive as a transclusion function.
14. compile – function to transform the template DOM
15. link – only used if the compile property is not defined. The link function is responsible for registering DOM listeners as well as updating the DOM. It is executed after the template has been cloned.

You can check out more about directive’s restrict and link functions on AngularJS’s official documentation on Directives