3

这是 plnkr：http ://plnkr.co/HVnZWK5dNuvu180HCT6o

我以为我写了一个简单的指令，只是table稍微重写了一些元素。目的是让嵌入的主体针对父范围做自己的事情。这是一个玩具，我知道，但我正在尝试推出一个“更智能”的桌子，但我无法超越基础知识。

数据表.js：

angular.module('daTable', [])
.directive('daTable', function() {
  return {
    restrict: 'E',
    replace: true,
    templateUrl: 'templates/da-table.html',
    transclude: true,
    scope: {}
  }
});

da-table.html：

<table class="table table-bordered table-striped table-hover table-condensed" border="1">
  <caption>Table</caption>
  <thead><tr><th>column 1</th></tr></thead>
  <tbody ng-transclude></tbody>
</table>

main.html（通过 $routeProvider 的路由视图）

...
<da-table>
  <tr ng-repeat="r in rows">
    <td>{{r.col1}}</td>
    <td>{{r.col2}}</td>
    <td>{{r.col3}}</td>
  </tr>
</da-table>
...

主.js：

dataTableApp.controller('MainCtrl', function($scope) {
  $scope.rows = [
    {col1: "data 1,1", col2: "data 1,2", col3: "data 1,3"},
    {col1: "data 2,1", col2: "data 2,2", col3: "data 2,3"},
    {col1: "data 3,1", col2: "data 3,2", col3: "data 3,3"}
  ]
});
4

2 回答 2

5

我已经在指令领域进行了大量研究，这些指令无法与嵌入和 ng-repeat 一起正常工作。

我遇到了这个：https ://github.com/angular/angular.js/issues/1459

这基本上是说要避免在指令中使用 <table>、<td> 或 <tr>。问题在于，在 angular 有机会查看它们之前，浏览器将内容移到了元素之外。

他们强烈建议（在 github 问题中）在您的指令中使用基于 CSS 的表格。

于 2013-01-14T02:37:25.670 回答
0

Actually I think it is really tricky issue and my vote is that this behaviour is because how browsers reorder emelents that are inside elements. It can 'pop' elements that are not inline with what table can contain.

And in your example ngTransclude appends transcluded content after , so order of elements becomes invalid and elements poped out of so are not shown.

So may be try to use other options to structure your page layout - like fluid layouts etc, that allows to avoid wierd browser's behavour with elements.

于 2013-01-07T17:48:49.007 回答