Interpolation markup with embedded expressions is used by Angular to provide data-binding to text nodes and attribute values.
An example of interpolation is shown below:
<a ng-href="img/{{username}}.jpg">Hello {{username}}!</a>
During the compilation process the compiler uses the $interpolate service to see if text nodes and element attributes contain interpolation markup with embedded expressions.
If that is the case, the compiler adds an interpolateDirective to the node and registers watches on the computed interpolation function, which will update the corresponding text nodes or attribute values as part of the normal digest cycle.
Note that the interpolateDirective has a priority of 100 and sets up the watch in the preLink function.
Attributes such as disabled are called boolean attributes, because their presence means true and
their absence means false. We cannot use normal attribute bindings with them, because the HTML
specification does not require browsers to preserve the values of boolean attributes. This means that
if we put an Angular interpolation expression into such an attribute then the binding information
would be lost, because the browser ignores the attribute value.
In the following example, the interpolation information would be ignored and the browser would simply interpret the attribute as present, meaning that the button would always be disabled.
Disabled: <input type="checkbox" ng-model="isDisabled" />
<button disabled="{{isDisabled}}">Disabled</button>
For this reason, Angular provides special ng-prefixed directives for the following boolean attributes:
disabled, required, selected,
checked, readOnly , and open.
These directives take an expression inside the attribute, and set the corresponding boolean attribute to true when the expression evaluates to truthy.
Disabled: <input type="checkbox" ng-model="isDisabled" />
<button ng-disabled="isDisabled">Disabled</button>
ngAttr for binding to arbitrary attributesWeb browsers are sometimes picky about what values they consider valid for attributes.
For example, considering this template:
<svg>
<circle cx="{{cx}}"></circle>
</svg>
We would expect Angular to be able to bind to this, but when we check the console we see
something like Error: Invalid value for attribute cx="{{cx}}". Because of the SVG DOM API's
restrictions, you cannot simply write cx="{{cx}}".
With ng-attr-cx you can work around this problem.
If an attribute with a binding is prefixed with the ngAttr prefix (denormalized as ng-attr-)
then during the binding it will be applied to the corresponding unprefixed attribute. This allows
you to bind to attributes that would otherwise be eagerly processed by browsers
(e.g. an SVG element's circle[cx] attributes). When using ngAttr, the allOrNothing flag of
$interpolate is used, so if any expression in the interpolated string
results in undefined, the attribute is removed and not added to the element.
For example, we could fix the example above by instead writing:
<svg>
<circle ng-attr-cx="{{cx}}"></circle>
</svg>
If one wants to modify a camelcased attribute (SVG elements have valid camelcased attributes),
such as viewBox on the svg element, one can use underscores to denote that the attribute to bind
to is naturally camelcased.
For example, to bind to viewBox, we can write:
<svg ng-attr-view_box="{{viewBox}}">
</svg>
The following attributes are also known to cause problems when used with normal bindings:
<select> elements (see Github issue 1619)<textarea> in Internet Explorer 10/11 (see Github issue 5025)Angular directives take either expressions or interpolation markup with embedded expressions. So the following example which embeds interpolation inside an expression is a bad practice:
<div ng-show="form{{$index}}.$invalid"></div>
You should instead delegate the computation of complex expressions to the scope, like this:
<div ng-show="getForm($index).$invalid"></div>
function getForm() {
return $scope['form' + $index];
}
You can also access the scope with this in your templates:
<div ng-show="this['form' + $index].$invalid"></div>