Question

我将此模板存储在一个文件中，该文件由一个名为budgetRow的自定义指令中的templateUrl指向：

<tr class="item_row" id="{{rowId}}">
  <td class="item_cell" id="description">
    <input type="text" ng-model='budget.row({{rowId}}).description' >
  </td>
</tr>

当$ scope.rowId设置为10时，这是在浏览器中呈现的内容。

<budget-row>
  <tr class="item_row" id="10">
    <td class="item_cell" id="description">
        <input type="text" ng-model="budget.row({{rowId}}).description"
               class="ng-pristine ng-untouched ng-valid">
    </td>
  </tr>
</budget-row>

为什么“{{rowId}}”在tr元素中插入但不在td元素中插入？

Answer 1

从ng-model指令中删除插值：

<tr class="item_row" id="{{rowId}}">
  <td class="item_cell" id="description">
    ̶<̶i̶n̶p̶u̶t̶ ̶t̶y̶p̶e̶=̶"̶t̶e̶x̶t̶"̶ ̶n̶g̶-̶m̶o̶d̶e̶l̶=̶'̶b̶u̶d̶g̶e̶t̶.̶r̶o̶w̶(̶{̶{̶r̶o̶w̶I̶d̶}̶}̶)̶.̶d̶e̶s̶c̶r̶i̶p̶t̶i̶o̶n̶'̶ ̶>̶
    <input type="text" ng-model='budget.row(rowId).description' >
  </td>
</tr>

ng-model指令采用AngularJS表达式。无需在AngularJS表达式中进行插值。

id属性不是AngularJS指令。它是vanilla HTML，因此要使用插值注入AngularJS表达式。

来自文档：

为什么混合插值和表达式是不好的做法：


它增加了标记的复杂性

无法保证它适用于每个指令，因为插值本身就是一个指令。如果另一个指令在插值运行之前访问属性数据，它将获得原始插值标记而不是数据。

它会影响性能，因为插值会为范围添加另一个观察者。

由于不推荐使用，我们不对此进行测试，对AngularJS核心的更改可能会破坏您的代码。


— AngularJS Developer Guide - Why mixing interpolation and expressions is bad practice

Angular在指令模板中插入，有时不插入？

1 个答案:

为什么混合插值和表达式是不好的做法：