It seems like using direct attributes and the ng-attr-* directive do the same thing. For example, the following render equivalently:
<div ng-attr-id="{{ 'object-' + value }}">ID</div>
<div id="{{ 'object-' + value }}">ID</div>
When should I use ng-attr-* and when should I use the direct HTML attribute?
4 Answers
ng-attr is used for add or not the attribute in context. If the expression {{undefined || null}}, the attribute is not added otherwise if has a value then attribute is added with the value {{ value }}.
The most common cases is in interpolation.
Related:
Conditionally adding data-attribute in Angular directive template
You use them for custom html data attributes - like if you wanted an attribute of let's say myData you would do
<div ng-attr-myData="{{ 'object-' + value }}">ID</div>
There are only a few situations where ng-attr-[attribute]="{{angular stuff}}" is different from just [attribute]="{{angular stuff}}". Certain elements within certain browsers can be broken if ng-attr is not used. Angular's documentation lists a few examples:
- size in
<select>elements (see issue 1619)- placeholder in
<textarea>in Internet Explorer 10/11 (see issue 5025)- type in
<button>in Internet Explorer 11 (see issue 14117)- value in
<progress>in Internet Explorer = 11 (see issue 7218)
Source:
ng-attr can be used to dynamically assign value to an attribute of any html element.
One case, where I used it was to associate a label to a form control with dynamic id.
<label ng-attr-for="{{parameter.name}}">{{ parameter.name }}</label>
<input ng-attr-id="{{parameter.name}}" type="text">
Also, it can be used to assign dynamic value to a custom attribute. Reference: here
