ng-table标头未在IE 9中显示

Question

我使用angularjs和ng-table指令（http://bazalt-cms.com/ng-table/）来构建Web应用程序。虽然ng-table指令中实现的表控件在Chrome和Firefox中运行良好，但表头不会出现在Internet Explorer 9中。行为是可重现的，例如使用ng-table doc（http://bazalt-cms.com/ng-table/example/1）的示例1。

通过调试示例，我看到在IE9中未正确加载用于表头部分的模板。它应该看起来像这样（从chrome输出）：

（更大的图片） http://abload.de/img/ngtablechromehwfts.png

但是IE9的结果是这样的： （更大的图像）http://abload.de/image.php?img=ngtableietepeu.png

<thead> - 标记使用ng-include从模板加载其子节点。但IE会从模板中删除导致问题的<tr>和<th>标记。再次显示<div>，它是<th>元素的子元素。我认为这种情况正在发生，因为IE以某种方式“检查”模板代码，并找到没有相应<tr>元素的<th>和<table>元素，从而删除了标记。

有谁知道如何避免这种元素的删除？它是否与IE兼容模式有某种关系？我玩IE兼容模式和文档模式，有时可能会看到元素没有被删除。但我无法重现这一点。

<thead>元素中包含的模板是：

<tr>
    <th ng-repeat="column in $columns"
        ng-class="{
                    'sortable': parse(column.sortable),
                    'sort-asc': params.sorting()[parse(column.sortable)]=='asc',
                    'sort-desc': params.sorting()[parse(column.sortable)]=='desc'
                  }"
        ng-click="sortBy(column)"
        ng-show="column.show(this)"
        ng-init="template = column.headerTemplateURL(this)"
        class="header {{column.class}}">

        <div ng-if="!template" ng-show="!template" ng-bind="parse(column.title)"></div>
        <div ng-if="template" ng-show="template"><div ng-include="template"></div></div>
    </th>
</tr>

但更简单的模板具有相同的效果。在IE9中删除了<tr>和<th>，<div>将包含在DOM中：

<tr>
    <th>
        <div>test text</div>
    </th>
</tr>

Answer 1

我也有这个问题。谷歌搜索更深，发现了这个：

http://goo.gl/jPmcva

导致

  

innerHTML属性在col，colGroup，frameSet，html，head，style，table，tBody，tFoot，tHead，title和tr对象上是只读的。

阅读http://msdn.microsoft.com/en-us/library/ms533897%28VS.85%29.aspx。

编辑：

正如我们发现的，当angular使用JQLite处理html元素时，错误存在，但是当它使用jquery时，问题就消失了。重要的是在angular.js之前包含jquery.js，否则angular将继续使用jqlite。您可能需要查看此内容：Angularjs jqlite append() and jquery append() act differently with <td>