角度ng-包含在错误的位置

Question

我尝试添加角度为<!-- preload stylesheet resource via declarative markup --> <link rel="preload" href="/styles/other.css" as="style"> <!-- or, preload stylesheet resource via JavaScript --> <script> var res = document.createElement("link"); res.rel = "preload"; res.as = "style"; res.href = "styles/other.css"; document.head.appendChild(res); </script> 的模板。要包含的页面：

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'; }; 在表格之前插入，而不在其中：

你可以帮我理解，为什么？提前谢谢。

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

Answer 1

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

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

所以，将其改为：

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

这只会将模板的内容放在tbody。

中

注意：您的代码可能适用于某些浏览器，因为其他浏览器可能会按原样呈现，但在检查器中可能会显示不同。例如：如果您错过了div的结束标记（例如），当您检查该元素时，您会看到结束标记，因为某些浏览器（如Chrome）会自动关闭（尽管您的网页排名像Google这样的搜索引擎可能会失败。

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