angularjs と ng-table ディレクティブ ( http://bazalt-cms.com/ng-table/ ) を使用して Web アプリケーションを構築します。ng-table ディレクティブで実装されたテーブル コントロールは Chrome と Firefox で正常に動作しますが、テーブル ヘッダーは Internet Explorer 9 では表示されません。この動作は、たとえば ng-table doc の例 1 ( http://bazalt -cms.com/ng-table/example/1 )。
例をデバッグすると、テーブルのヘッダー部分に使用されるテンプレートが IE9 に正しく読み込まれていないことがわかりました。次のようになります (chrome からの出力):
(大きな画像) http://abload.de/img/ngtablechromehwfts.png
しかし、IE9 での結果は次のようになります: (大きな画像) http://abload.de/image.php?img=ngtableietepeu.png
- タグは ng-include を使用して、<thead>テンプレートから子ノードをロードします。しかし、IEはテンプレートから<tr>andタグを切り取ってしまうため、問題が発生します。要素の子である back が表示され<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>
しかし、より単純なテンプレートでも同じ効果があります。IE9 で削除され<tr>、DOM に含まれます。<th><div>
<tr>
<th>
<div>test text</div>
</th>
</tr>