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 elementspriority
– 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 executescope
– sets scope of the directivebind to controller
– binds scope properties directly to directive controllercontroller
– controller constructor functionrequire
– require another directive and inject its controller as the fourth argument to the linking functioncontrollerAs
– 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 CommenttemplateNameSpace
– sets document type used by directive template: html, svg, or math. html is the defaulttemplate
– html markup that defaults to replacing the content of the directive’s element, or wraps the contents of the directive element if transclude is truetemplateUrl
– url provided asynchronously for the templatetransclude
– 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 DOMlink
– 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