Question

我正在尝试将thead生成移动到指令，但是当使用它时，标题会丢失其样式并最终在左侧聚集。任何人都可以提供一些关于我做错的指导吗？

标题如下所示：

Col1Col2Col3Col4Col5

当我使用相同的html而没有指令时，而不是这个。请注意，它们在数据列上方正确对齐：

Col1 Col2 Col3 Col4 Col5

的index.html

<table class="table table-hover">                        
    <thead>
        <table-headers></table-headers>
    </thead> 
    ...
    ...
</table>

directives.js

app.directive('tableHeaders', function() {
  return {
    restrict: 'E',
    transclude: true,
    replace: true,
    priority: 1001,
    templateUrl: '/PATH/TO/PARTIAL/table-headers.html'
  };
});

表headers.html

<tr>
    <th ng-cloak="true" ng-repeat="header in coreHeaders" ng-click="setOrderBy(header)"> {{header}} <i class="fa" ng-show="header == ordering.currentHeader" ng-class="ordering.reverse ? 'fa-caret-up' : 'fa-caret-down'"></i></th>
    <th class="align-right" ng-cloak="true" ng-repeat="header in statHeaders" ng-click="setOrderBy(header)">{{header}} <i class="fa" ng-show="header == ordering.currentHeader" ng-class="ordering.reverse ? 'fa-caret-up' : 'fa-caret-down'"></i></th>
</tr>

Answer 1

作为<thead>孩子的唯一元素是<tr>。即使你有一个Angular的指令替换它＆＃39;带有正确tr元素的原始标记，浏览器会更快;）并且会在指令编译之前破坏你的html，这样结果可能会非常意外。

尝试将table-header实现为属性（限制：＆＃39; A＆＃39;，并删除replace: true选项）。这样它从一开始就是一个有效的DOM树。

在thead中的ng-repeat和自定义指令问题

1 个答案: