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.
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
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.
terminal– set to true and the current priority will be the last set of directives to execute
scope– sets scope of the directive
bind to controller– binds scope properties directly to directive controller
controller– controller constructor function
require– require another directive and inject its controller as the fourth argument to the linking function
controllerAs– name reference to the controller in the directive scope to allow the controller to be referenced from the directive template.
restrict– restrict directive to Element, Attribute, Class, or Comment
templateNameSpace– sets document type used by directive template: html, svg, or math. html is the default
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
templateUrl– url provided asynchronously for the template
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.
compile– function to transform the template DOM
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
link functions on AngularJS’s official documentation on Directives