ng-repeat 和自定义指令问题答案

【问题标题】：ng-repeat and custom directive issue in theadng-repeat 和自定义指令问题
【发布时间】：2015-06-25 09:13:47
【问题描述】：

我正在尝试将我们的 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'
  };
});

table-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>

【问题讨论】：

简单的 plunker、fiddle 或代码演示？
你不需要在一个页面上多次使用ng-cloak="true"..
它可能与您在 thead 中添加自定义元素 (table-headers) 有关，其中唯一预期的元素是 tr。我知道您要在指令中替换它们，但这仍然可能是问题所在。尝试将table-headers 实现为属性（restrict: 'A'，并删除replace: true 选项）。
托梅克你是个天才！如果您发布作为答案将接受它。 @Vineet 你能详细说明一下吗？我认为 ng-cloak 用于在加载之前要隐藏的每个元素？
不适用于每个元素。您应该在声明ng-app 的地方使用它，即<body ng-app ng-cloak>

标签： javascript angularjs angularjs-directive ng-repeat

【解决方案1】：

作为<thead> 的子元素，您唯一可以拥有的元素是<tr>。 即使您有一个Angular 指令用正确的tr 元素替换它的原始标记，浏览器会更快 ;) 并且会在指令编译之前破坏您的 html，因此结果可能非常出乎意料。

尝试将表头实现为属性（限制：'A'，并删除replace: true 选项）。这样一开始它就是一个有效的 DOM 树。

【讨论】：