Question

似乎使用直接属性并且ng-attr-*指令执行相同的操作。例如，以下呈现等效：

   <div ng-attr-id="{{ 'object-' + value }}">ID</div>
   <div id="{{ 'object-' + value }}">ID</div>

我应该何时使用ng-attr-*，何时应该使用直接HTML属性？

Answer 1

ng-attr用于在上下文中添加或不添加属性。如果表达式{{undefined || null}}，则不添加该属性，否则如果具有值，则添加值为{{ value }}的属性。最常见的情况是插值。有关： Conditionally adding data-attribute in Angular directive template

Answer 2

您可以将它们用于自定义html数据属性 - 例如，如果您想要一个属性，让我们说myData就可以了

  <div ng-attr-myData="{{ 'object-' + value }}">ID</div>

Answer 3

只有少数情况ng-attr-[attribute]="{{angular stuff}}"与[attribute]="{{angular stuff}}"不同。如果不使用ng-attr，某些浏览器中的某些元素可能会被破坏。 Angular的文档列出了几个例子：

  <select>元素中的
大小（参见问题1619）
  Internet Explorer 10/11中的<textarea>中的
占位符（请参阅问题5025）
  Internet Explorer 11中<button>中的
类型（请参阅问题14117）
  Internet Explorer中的<progress>中的
值 = 11（参见问题7218）

来源：https://docs.angularjs.org/guide/interpolation#-ngattr-for-binding-to-arbitrary-attributes

Answer 4

ng-attr 可用于为任何html元素的属性动态分配值。

在一种情况下，我使用它的方法是将标签与具有动态ID的表单控件相关联。

<label ng-attr-for="{{parameter.name}}">{{ parameter.name }}</label>
<input ng-attr-id="{{parameter.name}}" type="text">

此外，它还可用于将动态值分配给自定义属性。参考：here

何时使用ng-attr？

4 个答案: