3

ここにplnkrがあります：http://plnkr.co/HVnZWK5dNuvu180HCT6o

table要素を少し書き換えるだけの簡単なディレクティブを書いたと思います。その意図は、トランスクルージョンされたボディが親スコープに関してそのことを行うようにすることです。それはおもちゃです、私は知っていますが、「よりスマートな」テーブルをテストドライブしようとしていますが、基本を乗り越えることができません.

daTable.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>
...

main.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

実際、これは非常にトリッキーな問題だと思います。私の意見では、この動作は、ブラウザが要素内にあるエメレントをどのように並べ替えるかが原因であるということです。テーブルに含めることができるインラインでない要素を「ポップ」できます。

そして、あなたの例では、 ngTransclude はトランスクルードされたコンテンツを の後に追加するため、要素の順序が無効になり、そこからポップされた要素は表示されません。

そのため、ページ レイアウトを構築するために他のオプションを使用することをお勧めします。流動レイアウトなど、要素に対するブラウザの奇妙な動作を回避することができます。

于 2013-01-07T17:48:49.007 に答える