角度 ng-include 位置错误答案

【问题标题】：Angular ng-include in wrong position角度 ng-include 位置错误
【发布时间】：2016-08-07 02:21:36
【问题描述】：

我尝试包含一个带有角度ng-include 的模板。要包含的页面：

<table class="table table-hover table-striped">
      <thead>
          <tr>
            <th translate>
              First
            </th>
            <th translate>
              Second
            </th>
            <th translate>
              Third
            </th>
          </tr>
      </thead>
      <tbody>
          <ng-include src="getTemplate('default')"></ng-include>
      </tbody>
  </table>

模板：

<tr class="table-row-clickable">
  <td>text1</td>
  <td>text2</td>
  <td>text3</td>
</tr>

获取模板方法：

$scope.getTemplate = function(templateName) {
    return APP_CONFIG.TPL_PATH + '/path/' + templateName + '.html';
};

模板加载正常，我可以在页面上看到它，但在错误的位置。这是我浏览器控制台的屏幕，ng-include 在表格之前插入，而不是在表格内部：

请您帮我理解一下，这是为什么呢？提前谢谢你。

编辑1、添加浏览器的渲染：

【问题讨论】：

我会直接将 ng-include 放在 tbody 标签上，即<tbody ng-include></tbody>
我正要写下@Dwardu 所说的内容。 ng-include 不使用“替换”，所以我认为浏览器可能会认为它在错误的位置并将其移到外面

标签： javascript angularjs angularjs-ng-include

【解决方案1】：

浏览器遵循 HTML 标准，因此 tbody 标签内不能有任何其他标签，如 ng-include。应该只有tr

<tbody>
    <ng-include src="getTemplate('default')"></ng-include>
</tbody>

所以，改成：

<tbody ng-include="getTemplate('default')"></tbody>

这会将模板的内容简单地放在tbody 中。

注意：您的代码可能在某些浏览器上运行，因为其他浏览器可能会按原样呈现它，但在检查器中可能会显示不同。例如：如果您错过了 div 的结束标记（例如），并且当您检查元素时，您将看到结束标记，因为 Chrome 等某些浏览器会自动为您关闭（尽管您的页面在搜索中排名像 Google 这样的引擎可能会倒下）。

尝试使用诸如Web Developer Tool 之类的扩展名并使用诸如查看生成的输出

之类的功能

【讨论】：

它就像一个魅力，谢谢。好的答案很简单）