21

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?

user548649
  • 35
  • 2
  • 7
zloctb
  • 10,592
  • 8
  • 70
  • 89
  • 1
    Yes they are the same `ng-attr` is used when the attribute would otherwise be eagerly processed by browsers please read here https://docs.angularjs.org/guide/directive (look for "ngAttr attribute bindings") – michelem Sep 01 '15 at 13:16

4 Answers4

17

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

Sieg
  • 554
  • 8
  • 17
  • 2
    Subtle but important correction: My testing shows that if the attribute is omitted only if the expression evaluates to `undefined`. If the expression evaluates to `null`, the attribute will be present but the assigned value will be omitted. For example: `` would become ``. This is described in the angularjs documentation [here](https://docs.angularjs.org/guide/interpolation#-ngattr-for-binding-to-arbitrary-attributes). – nephtes Jun 26 '20 at 14:15
9

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: https://docs.angularjs.org/guide/interpolation#-ngattr-for-binding-to-arbitrary-attributes

omikes
  • 8,064
  • 8
  • 37
  • 50
8

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>
ajmajmajma
  • 13,712
  • 24
  • 79
  • 133
  • 2
    OK. What's dif between ng-attr-myData and myData ? – zloctb Sep 01 '15 at 13:21
  • 1
    You cant evaluate myData. Your example only works because it uses ID which already exists. @zloctb – ajmajmajma Sep 01 '15 at 13:22
  • 2
    for camel case attributes you would actually need to do `ng-attr-my_data`, but as @zloctb states this provides no benefit over just setting a myData attribute without `ng-attr-` – omikes Dec 28 '17 at 20:32
0

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

CodeZila
  • 919
  • 2
  • 14
  • 31