Lesser know AngularJS directives

I have been working on Angular for the past few months and have quite fallen in love with its approach to frontend development.One of the most awesome things in angular is its approach towards creating reusable HTML attributes and elements through ‘Directives’. Along with letting you write your own custom directives, angular ships with a lot of default directives. while some are helpers like ng-show,ng-class
others ng-model ng-src are bound with angular internals. This blog post is a list of a few lesser known yet useful directives.

ng-if

From an aesthetic point ng-if works similar to ng-show and ng-hide, but instead of hiding the Dom element it selectively adds or removes it from
the DOM tree based on whether the expression supplied it true for false. This is use full because unlike hide and show, the removed element
will not be collected when using css selectors.

ng-class-even/ng-class-odd
While in ng-repeat, we can selectively add classes to the repeated element based on whether the index of the element is odd or even.
Bonus:$index gives the index of the element in the iterator.

ng-change
ng-change lets you to trigger a function or evaluate a expression when the text changes in the particular text box. For the ng-change to work,
the text box should be binded to a model.

ng-dbclick
db-click handles double click events within an element and lets you invoke a function or evaluate a expression when it is done.
similar:ng-mousedown,ng-keypress.

ng-style
Lets you add inline styles to your elements. although inline styles are evil and should be avoided, this cool as you can dynamically update
your style attribute values based on a model binding.

ng-pluralize
The pluralize directive lets you pluralize your content based on en-US localization rules.

Example

Based on the value of members_count. member or members is rendered.
ng-cloak
When the browser renders HTML if AngularJS is not loaded completly, the bindings will show up as very ugly curly braces.
This directive acts as blanket from displaying angular binding syntax before Angular JS is loaded into the browser.
Using this directive in your main pages is a must.
similar:ng-href

These along with many other built in angular directives give us a hint of what angular project philosophy is and where it is heading towards.
Making Common UI events more declarative, reusable and decoupled from the application logic.

Advertisements

3 thoughts on “Lesser know AngularJS directives

  1. Nice article, but I just would like to add that some of these directives, for example ng-if are only available in a unstable version 1.1.2..

    So Angular versions were these directives are available will be nice to have in the article.

  2. Pingback: AngularJS Highlights: Week Ending 27 October 2013 | SyntaxSpectrum

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s