Angular的ng-container在AngularJS中是否有等效实现方案？

首先直接给结论：AngularJS没有原生提供和Angular ng-container 完全等效的指令，不过我们可以用原生指令或者自定义指令来实现相同的效果——即在不新增额外DOM层级的前提下，包裹并重复渲染内容。

针对你提到的「交错成对单元格的表格」场景，有两种常用的实现方式：

方法1：用原生的ng-repeat-start和ng-repeat-end（推荐） #

AngularJS的ng-repeat-start和ng-repeat-end指令专门用来处理多元素的循环渲染，它们可以让你把循环逻辑应用到一组元素上，同时不会产生额外的DOM节点。完全匹配你的需求：

<table>
  <tr>
    <!-- 用ng-repeat-start标记循环的起始元素 -->
    <td ng-repeat-start="item in items">{{ item.a }}</td>
    <!-- 用ng-repeat-end标记循环的结束元素 -->
    <td ng-repeat-end>{{ item.b }}</td>
  </tr>
</table>

渲染后的DOM结构里，每一对<td>都会直接作为<tr>的子元素，没有任何多余的包裹节点，和你用Angular ng-container 实现的效果完全一致。

方法2：自定义带transclude的指令（复用场景） #

如果你需要一个更通用的「无DOM容器」（类似ng-container）来复用在其他场景，可以自定义一个简单的指令，利用AngularJS的transclude特性：

第一步：定义指令 #

angular.module('yourAppName').directive('ngContainer', function() {
  return {
    transclude: true,
    replace: true, // 替换指令本身，不保留额外节点
    template: '<ng-transclude></ng-transclude>'
  };
});

第二步：使用指令 #

用法和Angular的ng-container几乎一模一样：

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

这个指令会把包裹的内容直接渲染到指令所在的位置，不会留下任何额外的DOM节点，完美实现ng-container的核心功能。

内容的提问来源于stack exchange，提问作者mvermand