AngularJS has a TON of directives.  Here’s a quick list of 10 built-in AngularJS directives that I find myself using more often than any others.


ng-controller – Binds a section of the view to a controller.  This directive is going away in AngularJS 2.0 (for good reason!), and I don’t use it as often as I used to, but it’s still all over the place in my older code. 

ng-model – Two-way binds an input, select, or textarea, or other ngModel-requiring directive to a particular property in scope (or on your controller if you are using the ‘controller as’ syntax, which you should be)

ng-bind – One-way (model to view) data binding.  Changes to your UI won’t update your model, but changes to the model will update the UI.

ng-click – Attaches an event handler that fires on click.  Remember that it only has access to what’s currently in scope.  It cannot access things outside of scope, so you can’t do something like "ng-click=’window.alert(…)’".

ng-disabled – Conditionally disables an element if the associated expression is true.  This only works on elements where the disabled attribute is valid, such as form controls and fieldsets. 

ng-show/ng-hide – Conditionally show/hide an element if the associated expression is true.

ng-href – Use this when you need to do binding inside the href attribute of an anchor element.

ng-repeat – Repeats a portion of the DOM for each item in the associated collection.

ng-class – Allows you to conditionally apply classes to an element, complete with data binding and updating.

ng-submit – Attaches an event handler that fires when a form is submitted.  Again, you only have access to what is currently in scope.

BONUS – <my-customer-directive> – I actually find myself creating custom directives quite often these days.  Directives give you the ability to encapsulate a controller and its markup into a single component, which is closer to how things will work in AngularJS 2.0, plus it just “feels” right to me. 

Next up, we’ll look at some of the lesser-used directives in AngularJS.