什么时候使用ng-attr？

Question

什么时候使用ng-attr？

似乎使用直接属性和ng-attr-*指令做同样的事情.例如,以下呈现等效:

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

Run Code Online (Sandbox Code Playgroud)

我ng-attr-*什么时候应该使用,何时应该使用直接HTML属性？

Answer 1

Sie*_*ieg 13

ng-attr用于在上下文中添加或不添加属性.如果是表达式{{undefined || null}},则不添加属性,否则如果具有值,则将属性与值一起添加{{ value }}.最常见的情况是插值.相关: 在Angular指令模板中有条件地添加data-attribute

微妙但重要的更正：我的测试表明，只有当表达式的计算结果为“未定义”时才省略该属性。如果表达式的计算结果为“null”，则该属性将存在，但分配的值将被省略。例如：“<input ng-attr-disabled="{{null}}">”将变为“<input disabled>”。这在 angularjs 文档中进行了描述[此处](https://docs.angularjs.org/guide/interpolation#-ngattr-for-binding-to- Arbitration-attributes)。 (2认同)

Answer 2

omi*_*kes 7

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

尺寸的<select>元素（参见问题1619）

占位符在<textarea>Internet Explorer中10/11（见问题5025）

键入在<button>Internet Explorer中11（见问题14117）

值在<progress>Internet Explorer中= 11（见问题7218）

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

Answer 3

ajm*_*jma 5

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

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

Run Code Online (Sandbox Code Playgroud)

好。ng-attr-myData和myData之间有什么区别？ (2认同)
对于驼峰式案例属性，您实际上需要执行ng-attr-my_data，但是@zloctb指出，与仅设置没有ng-attr-的myData属性相比，这没有任何好处。 (2认同)

归档时间：	10 年，3 月前
查看次数：	33966 次
最近记录：	7 年，1 月前