AngularJS Custom Directives
Introduction
Here you will learn about the Directives feature of AngularJS. Below you will find information on what Directives are, as well as Basic and Advanced examples of how to use them.
Parameters
| Parameter | Details |
|---|---|
| scope | Property to set the scope of the directive. It can be set as false, true or as an isolate scope: { @, =, <, & }. |
| scope: falsy | Directive uses parent scope. No scope created for directive. |
| scope: true | Directive inherits parent scope prototypically as a new child scope. If there are multiple directives on the same element requesting a new scope, then they will share one new scope. |
| scope: { @ } | One way binding of a directive scope property to a DOM attribute value. As the attribute value bound in the parent, it will change in the directive scope. |
| scope: { = } | Bi-directional attribute binding that changes the attribute in the parent if the directive attribute changes and vice-versa. |
| scope: { < } | One way binding of a directive scope property and a DOM attribute expression. The expression is evaluated in the parent. This watches the identity of the parent value so changes to an object property in the parent won't be reflected in the directive. Changes to an object property in a directive will be reflected in the parent, since both reference the same object |
| scope: { & } | Allows the directive to pass data to an expression to be evaluated in the parent. |
| compile: function | This function is used to perform DOM transformation on the directive template before the link function runs. It accepts tElement ( the directive template ) and tAttr ( list of attributes declared on the directive ). It does not have access to the scope. It may return a function that will be registered as a post-link function or it may return an object with pre and post properties with will be registered as the pre-link and post-link functions. |
| link: function/object | The link property can be configured as a function or object. It can receive the following arguments: scope(directive scope), iElement( DOM element where directive is applied ), iAttrs( collection of DOM element attributes ), controller( array of controllers required by directive ), transcludeFn. It is mainly used to for setting up DOM listeners, watching model properties for changes, and updating the DOM. It executes after the template is cloned. It is configured independently if there is no compile function. |
| pre-link function | Link function that executes before any child link functions. By default, child directive link functions execute before parent directive link functions and the pre-link function enables the parent to link first. One use case is if the child requires data from the parent. |
| post-link function | Link function that executives after child elements are linked to parent. It is commonly used for attaching event handlers and accessing child directives, but data required by the child directive should not be set here because the child directive will have already been linked. |
| restrict: string | Defines how to call the directive from within the DOM. Possible values (Assuming our directive name is demoDirective): E - Element name (<demo-directive></demo-directive>), A - Attribute (<div demo-directive></div>), C - Matching class (<div class="demo-directive"></div>), M - By comment (<!-- directive: demo-directive -->). The restrict property can also support multiple options, for example - restrict: "AC" will restrict the directive to Attribute OR Class. If omitted, the default value is "EA" (Element or Attribute). |
| require: 'demoDirective' | Locate demoDirective's controller on the current element and inject its controller as the fourth argument to the linking function. Throw an error if not found. |
| require: '?demoDirective' | Attempt to locate the demoDirective's controller or pass null to the link fn if not found. |
| require: '^demoDirective' | Locate the demoDirective's controller by searching the element and its parents. Throw an error if not found. |
| require: '^^demoDirective' | Locate the demoDirective's controller by searching the element's parents. Throw an error if not found. |
| require: '?^demoDirective' | Attempt to locate the demoDirective's controller by searching the element and its parents or pass null to the link fn if not found. |
| require: '?^^demoDirective' | Attempt to locate the demoDirective's controller by searching the element's parents, or pass null to the link fn if not found. |
