Question

这是Angular ng-container等效的AngularJS吗？

或者我应该使用transclude指令自己创建一些东西吗？

用例示例：

具有隔行扫描对，三元组等的表：

<table><tr>
  <ng-container ng-repeat="item in items">
    <td>{{ item.a }}</td>
    <td>{{ item.b }}</td>
  </ng-container>
</tr></table>

DOM树中不应该有其他级别，而<td> s应该是<tr>元素的直接子级。

HTML列表存在类似的问题，尤其是<dt> / <dd>元素应该是<dl>的直接子元素的定义列表，而它们通常成对存在。

使用display:grid的数据表格式排列：

<div style="display: grid; grid-template-columns: auto auto">
    <ng-container ng-repeat="item in items">
        <div>{{ item.a }}</div>
        <div>{{ item.b }}</div>
    </ng-container>
</div>

这种情况甚至更成问题，因为DOM树中存在的容器元素导致整个布局中断，因为它被渲染为单元格而不是其子元素。

Answer 1

在提到的情况下，可以分别使用ng-repeat-start和ng-repeat-end对：

具有隔行扫描对，三元组等单元格的表：

<table><tr>
  <td ng-repeat-start="item in items">{{ item.a }}</td>
  <td ng-repeat-end>{{ item.b }}</td>
</tr></table>

HTML列表：

<dl>
  <dt ng-repeat-start="item in items">{{ item.term }}</dt>
  <dd ng-repeat-end>{{ item.definition }}</dd>
</dl>

具有display：grid的表状数据排列：

<div style="display: grid; grid-template-columns: auto auto">
  <div ng-repeat-start="item in items">{{ item.a }}</div>
  <div>{{ item.b }}</div>
  <div ng-repeat-end>{{ item.c }}</div>
</div>

您可以在API参考https://docs.angularjs.org/api/ng/directive/ngRepeat#special-repeat-start-and-end-points

中了解此内容

Answer 2

您也可以在Angularjs和Angular-2使用相同的ng-container。但在angular-2中，ng-template还有另一个选项ng-container

Answer 3

不幸的是，在AngularJS中，ng-repeat，ng-if等必须用于标记中将出现的HTML元素。根据确切的用例，您可以尝试将元素指令与replace: true一起使用。

AngularJS等效于Angular ng-container

3 个答案: