配列からテーブルを生成するためのAngularJSディレクティブをコードする正しい方法

Question

の配列からフルテーブルを生成するディレクティブを作成し、特定のonMouseOverビヘイビアを提供し、セルをクリックすると、同じ値（およびこの例では重要でない他の特定の動作）。

// AngularJS controller 
$scope.myArrayOfValues = [[0,1,2,3,4],[5,6,7,8,9]]; 
// Page HTML 
<my-table-directive values='myArrayOfValues'></my-table-directive> 

私は以下のアプローチについて考えてきましたが、そのような問題のベストプラクティスとしては間違いがあります。

NB。簡潔にするために、以下のコードは配列からテーブルを生成するだけですが、上記の追加動作を提供しません。

（1）

app.directive('myTableDirective', function() { 
    return { 
     restrict: 'E', 
     replace: true, 
     scope: { 
      values: '=' 
     }, 
     template: '<table class="ffrs-table">' + 
       '<tr>' + 
        '<th ng-repeat="cell in data.labels">{{cell}}</td>' + 
       '</tr>' + 
       '<tr ng-repeat="row in data.values track by $index">' + 
        '<td class="centered" ng-repeat="cell in row track by $index">{{cell}}</td>' + 
       '</tr>' + 
       '</table>', 
     link: function(scope, elem, attrs) 
     { 
      //elem.children() does not return tr/th/td DOM elements 
     } 
    }; 
}); 

ディレクティブ「テンプレート」プロパティを使用した。しかし、このアプローチは、これは彼らがこの関数内に存在していないようですlink機能で、テーブルのDOM要素を操作することはできません。このアプローチでは

（2）jQueryのテーブル作成

app.directive('myTableDirective', function() { 
    return { 
     restrict: 'E', 
     replace: false, 
     scope: { 
      values: '=' 
     }, 
     link: function(scope, elem, attrs) 
     { 
      scope.$watch('tableData', function(val) 
      { 
       if(val) { 
        var row; 
        for(var t=0; t<val.values.length; t++) { 
         row = angular.element('<tr></tr>'); 
         for(var f=0; f<val.values[t].length; f++) { 
          row.append('<td>' + val.values[t][f] + '</td>'); 
         } 
         elem.append(row); 
        } 
       } 
       elem.addClass('my-table-css-class'); 
      } 
     } 
    }; 
}); 

addClassコールはそれが前にTR/td要素だった要素に適用するようだとして、問題は、依然として存在しています追加。

各TR /目/ TD要素に

（3）ng-repeat及び指令の使用 Iは、テーブル・コードを表示し、短くするために20の以上のテーブルを持っているので、これは私がテストしていませんでしたアプローチであるですHTMLファイル、より良い...

したがって、正しいアプローチは何ですか？あるいは、それらのどれも正しいとは言えず、そのような問題は別の方法で解決すべきですか？

Answer 1

私はあなたがアプローチ＃1で正しい道にいると信じています。代わりに、私はng-clickとng-mouseoverによってトリガーされている機能で、このディレクティブにコントローラを追加することをお勧めリンク機能の中に何が必要達成しようとする：

controller: ['$scope', function MyTableController($scope) { 
    $scope.doSomething = function() { 
    // your code here 
    }; 

    $scope.highlightSameValues = function(cell) { 
    // your code here 
    }; 
}]; 

だから、例えば、あなたが特定の「もの」をしたい場合各セルにマウスを合わせてクリックすると、tdが次のように変更されます。

<td 
    class="centered" 
    ng-repeat="cell in row track by $index" 
    ng-mouseover="doSomething()" 
    ng-click="highlightSameValues(cell)"> 
    {{cell}} 
</td>