[解決済み] AngularJSディレクティブでチェックボックスのクリックに応答するには?

質問

私は、AngularJSの ディレクティブがあります。 ディレクティブがあり、以下のようなテンプレートでエンティティのコレクションをレンダリングします。

<table class="table">
  <thead>
    <tr>
      <th><input type="checkbox" ng-click="selectAll()"></th>
      <th>Title</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="e in entities">
      <td><input type="checkbox" name="selected" ng-click="updateSelection($event, e.id)"></td>
      <td>{{e.title}}</td>
    </tr>
  </tbody>
</table>

見ての通り、これは <table> の中にあるマスターチェックボックスで一度にすべての行を選択することができます。 <thead> . かなり古典的なUIです。

何が一番良い方法なのか。

• 1つの行を選択する（つまり、チェックボックスがチェックされたとき、選択されたエンティティのidを内部配列に追加し、CSSクラスを <tr> に CSS クラスを追加して、その選択状態を反映させます)？
• 一度にすべての行を選択しますか？ (つまり、前に説明したアクションを <table> )

私の現在の実装は、ディレクティブにカスタムコントローラを追加することです。

controller: function($scope) {

    // Array of currently selected IDs.
    var selected = $scope.selected = [];

    // Update the selection when a checkbox is clicked.
    $scope.updateSelection = function($event, id) {

        var checkbox = $event.target;
        var action = (checkbox.checked ? 'add' : 'remove');
        if (action == 'add' & selected.indexOf(id) == -1) selected.push(id);
        if (action == 'remove' && selected.indexOf(id) != -1) selected.splice(selected.indexOf(id), 1);

        // Highlight selected row. HOW??
        // $(checkbox).parents('tr').addClass('selected_row', checkbox.checked);
    };

    // Check (or uncheck) all checkboxes.
    $scope.selectAll = function() {
        // Iterate on all checkboxes and call updateSelection() on them??
    };
}

もっと具体的に言うと、どうなんだろう。

• 上記のコードはコントローラに属するものなのでしょうか、それとも link 関数に書くべきでしょうか？
• jQueryが必ずしも存在しない（AngularJSはそれを必要としない）ことを考えると、DOMトラバーサルを行うための最良の方法は何でしょうか？jQueryがない場合、私は親を選択するだけで苦労している <tr> を選択したり、テンプレート内のすべてのチェックボックスを選択したりするのに苦労しています。
• 渡す $event を updateSelection() はあまりエレガントではないようです。クリックされたばかりの要素の状態 (チェック済み/チェックなし) を取得する、より良い方法はないのでしょうか?

ありがとうございます。

どのように解決するのですか？

これは、私がこの種のことを行ってきた方法です。Angularはdomを命令的に操作するよりも宣言的に操作することを好む傾向があります（少なくとも私はそうして遊んできました）。

マークアップ

<table class="table">
  <thead>
    <tr>
      <th>
        <input type="checkbox" 
          ng-click="selectAll($event)"
          ng-checked="isSelectedAll()">
      </th>
      <th>Title</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="e in entities" ng-class="getSelectedClass(e)">
      <td>
        <input type="checkbox" name="selected"
          ng-checked="isSelected(e.id)"
          ng-click="updateSelection($event, e.id)">
      </td>
      <td>{{e.title}}</td>
    </tr>
  </tbody>
</table>

そして、コントローラでは

var updateSelected = function(action, id) {
  if (action === 'add' && $scope.selected.indexOf(id) === -1) {
    $scope.selected.push(id);
  }
  if (action === 'remove' && $scope.selected.indexOf(id) !== -1) {
    $scope.selected.splice($scope.selected.indexOf(id), 1);
  }
};

$scope.updateSelection = function($event, id) {
  var checkbox = $event.target;
  var action = (checkbox.checked ? 'add' : 'remove');
  updateSelected(action, id);
};

$scope.selectAll = function($event) {
  var checkbox = $event.target;
  var action = (checkbox.checked ? 'add' : 'remove');
  for ( var i = 0; i < $scope.entities.length; i++) {
    var entity = $scope.entities[i];
    updateSelected(action, entity.id);
  }
};

$scope.getSelectedClass = function(entity) {
  return $scope.isSelected(entity.id) ? 'selected' : '';
};

$scope.isSelected = function(id) {
  return $scope.selected.indexOf(id) >= 0;
};

//something extra I couldn't resist adding :)
$scope.isSelectedAll = function() {
  return $scope.selected.length === $scope.entities.length;
};

EDIT : getSelectedClass() はエンティティ全体を期待しますが、エンティティのidのみで呼び出されていたため、修正しました。