When to use ng-attr?

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</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