Angular ng-include位置错误。

Question

我尝试使用Angular的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，添加浏览器渲染：

- Georgy

---

我会将ng-include直接放在tbody标签上，即 <tbody ng-include></tbody>。 - ed'

我正准备写@Dwardu所说的内容。 ng-include没有使用"replace"，因此我认为浏览器可能会决定它位于错误的位置并将其移动到外面。 - valepu

Answer 1

浏览器遵循HTML标准，因此在标签中不能有其他标签，如。应该只有标签。

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

所以，把它改为：

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

这将简单地将模板内容放置在tbody标签中。

注意：您的代码可能在某些浏览器上运行，因为其他浏览器可能会按原样呈现它，但在检查器中可能显示不同。例如：如果您错过了一个

标签的结束标记，当您检查该元素时，您将看到结束标记，因为一些浏览器（如Chrome）将自动为您关闭它（尽管您的页面排名对于Google等搜索引擎可能会下降）。

尝试使用一些扩展程序，如Web Developer Tool并使用“查看生成的输出”等功能。

- Shashank Agrawal

---

它像魔法一样奏效，谢谢。好的答案总是简单明了的。 - Georgy