1

我使用 angularjs 和 ng-table 指令 ( http://bazalt-cms.com/ng-table/ ) 来构建一个 Web 应用程序。虽然在 ng-table 指令中实现的表格控件在 Chrome 和 Firefox 中运行良好，但表格标题未显示在 Internet Explorer 9 中。该行为是可重现的，例如 ng-table doc ( http://bazalt ) 的示例 1 -cms.com/ng-table/example/1）。

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

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

ngTable Chrome

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

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

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

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

1 回答 1

3

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

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 different with <td>

于 2014-02-20T10:13:00.083 回答