Angular Directives

Angular Directives

Angular 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.

Angular Directives can be written in 4 ways.
1. As a tag e.g . <ng-form />

2. As a attribute of a tag e.g. <div ng-form />

3. As a class e.g. <div class=”ng-form”/>

4. As a html comment
Note: All the directives cannot be written in all 4 ways, refer angular documentation for more details.

• ng-src :  This attribute is used to provide source of image in <img/> tag

If we have to provide source of image as a value which evaluates at runtime by angular engine (This value contains angular expression) then we use ng-src attribute.

      Consider we have to provide image URL as value which is stored in imageSource property of $scope variable and if we write it as below

<img src=”{{imageSource}}”/>

Then browser immediately tries to render image before angular expression is evaluated, with imageURL as “{{imageSource}}” and which fails.

ng-src attribute delays requesting of image till the time angular replaces angular expression( “{{imageSource }}” in above case ) with actual URL value for the image.

• ng-repeat : This attribute is used to repeat some template for collection of values.

You can consider this same as foreach loop where you iterate through a collection.

E.g.  <div ng-init="numbers=[1, 2, 3, 4]">
                       <div ng-repeat="n in numbers">
                        {{n}}
                       </div>
        </div>

When a change happens, ngRepeat then makes the corresponding changes to the DOM:

• When an item is added, a new instance of the template is added to the DOM.
• When an item is removed, its template instance is removed from the DOM.
• When items are reordered, their respective templates are reordered in the DOM.

To minimize creation of DOM elements, ngRepeat uses a function to "keep track" of all items in the collection and their corresponding DOM elements. For example, if an item is added to the collection, ngRepeat will know that all other items already have DOM elements, and will not re-render them.

The default tracking function (which tracks items by their identity) does not allow duplicate items in arrays. This is because when there are duplicates, it is not possible to maintain a one-to-one mapping between collection items and DOM elements.

If you do need to repeat duplicate items, you can substitute the default tracking behavior with your own using the track by expression.

For example, you may track items by the index of each item in the collection, using the special scope property $index:

<div ng-repeat="n in [42, 42, 43, 43] track by $index">
  {{n}}
</div>

You may also use arbitrary expressions in track by, including references to custom functions on the scope:

<div ng-repeat="n in [42, 42, 43, 43] track by myTrackingFunction(n)">
  {{n}}
</div>

• ng-bind : This attribute is used to bind value to a element.

We use expression syntax to bind value to html elements (eg. <div>Employee Name : {{ employeedetails.firstname }}</div>).

We can do same using the ng-bind directive.

It replaces text content of the HTML element with the value of a given expression, and updates the text content when the value of that expression changes.

E.g. <div ng-bind="employeedetails.firstname"></div>

Please note here that I haven’t used expression syntax(i.e. {{ }}).

• ng-bind-template : This attribute is used to bind multiple values to a element.

It work same as ng-bind except it can bind multiple values to same element which is not possible with ng-bind.

E.g. <div ng-bind-template="{{employeedetails.firstname}} {{employeedetails.lastname}}"></div>

Please note that here I have to use expression syntax (i.e. {{ }})

•  ng-bind-html : This attribute is used to bind html string markup to element

It replaces the content(innerHTML) of element with the specified binding.

E.g. For <div ng-bind-html="myhtmlsnippet">My Content</div>

Where $scope.myhtmlsnippet = '<b > <i style="color:red;"> This is Demo created by Naren </i> </b>';

The output for above code snipped would be the “My Content” would be replaced with html in myhtmlsnippet variable.

And the rendered html would be as follows:

<div ng-bind-html="myhtmlsnippet" class="ng-binding"><b> <i> This is Demo created by Naren </i> </b></div>

• ng-show : This attribute is used to Show or Hide element based on value of binded expression.

E.g. <div ng-show=" myVisibilityParam "></div>

This div will be shown if value of myVisibilityParam variable evaluates to true else it will be hidden.

• ng-hide : This attribute is used to Hide or Show element based on value of binded expression.

Hides or shows element based on value of binded expression.

E.g. <div ng-hide=" myVisibilityParam "></div>

This div will be hidden if value of myVisibilityParam variable evaluates to true else it will be shown.

• ng-cloak : This attribute is used to avoid displaying of angular expression tags on slower computer untill they are processed by angular engine.

It holds rendering of html element until the angular directives are processed by angular engine and bindings are replaced with actual values.

If this is not used then user might get flashesh on slower computers and can see binding expressions until then are replaced with actual values..

You can Download code here for this article.