Developer Guide: Angular HTML Compiler: Understanding Angular Directives

An angular directive is a custom HTML attribute that angular knows how to process. You add them to a template element like any other attribute. Angular directives all have a ng: prefix. In the following example, the angular directive (ng:controller) is a div tag:

    <div ng:controller>

You use angular directives to modify DOM element properties. The element you modify can be an existing HTML element type or a custom DOM element type that you created. You can use any number of directives per element.

You add angular directives to a standard HTML tag as in the following example, in which we have added the ng:click directive to a button tag:

    <button ng:click="foo()">Click This</button>

The ng:click directive lets you specify click event handlers directly in the template. Unlike the evil onclick attribute, the expression associated with the ng:click directive is always executed in the context of the current angular scope.

In the next example, we add the ng:bind directive to a <span> tag:

    <span ng:bind="1+2"></span>

The ng:bind directive tells angular to set up data binding between the data model and the view for the specified expression. When the angular compiler encounters an ng:bind directive in a template, it passes the attribute value to the ng:bind function, which in turn sets up the data binding. On any change to the model that would change the result of the expression, the view is updated and the text of the span element will reflect the new value. In the example above, the model is represented by two constants, so nothing will ever change - Sorry!

Related Topics

Related API: