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 在 table 之前插入，而不是在其中：

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

编辑1，添加浏览器渲染：

Answer 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 这样的扩展，并使用像 查看生成的输出

这样的功能

Angular ng-include 位置错误

Angular ng-include in wrong position

javascript

angularjs

angularjs-ng-include