テンプレートを使用して角データテーブルの現在の行データにアクセスするにはどうすればよいですか？

Question

私はangular-datatablesを使用しています。インラインテンプレートを使用してレンダリングする列Actionsがあります。私はそのテンプレート内の現在の行データにアクセスしたい。それはどうですか？

コントローラ

$scope.dtOptions = DTOptionsBuilder.newOptions().withOption('ajax', { 
     url: '/api/department', 
     type: 'GET' 
    }) 
    .withDataProp('data') 
    .withOption('processing', true) 
    .withOption('serverSide', true) 
    .withPaginationType('full_numbers') 
    .withOption('createdRow', function (row, data, dataIndex) { 
     return $timeout(function() { 
      // Recompiling so we can bind Angular directive to the DT 
      return $scope.$apply($compile(angular.element(row).contents())($scope)); 
     }); 
    }) 
    .withBootstrap(); 
$scope.dtColumns = [ 
    DTColumnBuilder.newColumn('id').withTitle('ID'), 
    DTColumnBuilder.newColumn('name').withTitle('Name'), 
    DTColumnBuilder.newColumn('actions').withTitle('Actions').withOption("searchable", false) 
]; 

ビューここ

<div class="hbox hbox-auto-xs hbox-auto-sm" ng-controller="DepartmentsController"> 
    <!-- Inline Template --> 
    <script type="text/ng-template" id="actions.html"> 
     <button class="btn btn-primary btn-xs" 
       ng-click="edit(/** CURRENT ROW ELEMENT ID */)"><i class="fa fa-edit"></i> Edit</button> 
     <button class="btn btn-danger btn-xs" 
       ng-click="delete()"><i class="fa fa-trash"></i> Delete</button> 
    </script> 
    <div class="bg-light lter b-b wrapper-md"> 
     <h1 class="m-n font-thin h3">Departments</h1> 
    </div> 
    <div class="wrapper-md"> 
     <div class="panel panel-default"> 
      <div class="panel-body"> 
       <div class="row"> 
        <div class="col-xs-6"> 
         <button class="btn m-b-md btn-md btn-primary " ui-sref="manager.departments.create"> 
          <i class="fa fa-plus"></i> <span class="hidden-sm hidden-xs">Add Department</span></button> 
        </div> 
       </div> 
       <div class="row"> 
        <div class="col-sm-12 m-b-xs"> 
         <table datatable="" dt-options="dtOptions" dt-columns="dtColumns" class="table table-striped b-t b-b"> 
          <thead> 
           <tr> 
            <th style="width:20%">ID</th> 
            <th style="width:60%">Name</th> 
            <th style="width:20%">Actions</th> 
           </tr> 
          </thead> 
         </table> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

はあなたを助けるためにplunkrです：闘争の時間後http://plnkr.co/edit/iAZBof7g6cp68RnM0X8H?p=preview

Answer 1

、私は解決策を見つけました。それはあなたがそれを見るときにはかなり明白です。

createRowコールバックの$ compileに渡す前に、新しいスコープを作成してデータを追加しました。独自のデータを各行に渡すには、新しいスコープを作成する必要があります。単に$scope.rowを渡すと、各行は処理された最後の行と同じ行になります。

コントローラ

.withOption('createdRow', function (row, data, dataIndex) { 
     // Create a new scope for each row, otherwise, data will 
     // not be unique for each row becuase of data bindings 
     var $newScope = $scope.$new(true); 
     $newScope.row = data; 

     // Pass any methods you are using in current scope 
     $newScope.delete = $scope.delete; 

     return $timeout(function() { 
       // Recompiling so we can bind Angular directive to the DT 
       return $scope.$apply($compile(angular.element(row).contents())($newScope)); 
      }); 
     }); 

図

Answer 2

<script type="text/ng-template" id="actions.html"> 
    <button class="btn btn-primary btn-xs" ui-sref="manager.departments.edit({id: {{ row.id }} })"><i class="fa fa-edit"></i> Edit</button> 
    <button class="btn btn-danger btn-xs" ng-bootbox-confirm="Are you sure you want to delete this department?" ng-bootbox-confirm-action="delete(row.id)"><i class="fa fa-trash"></i> Delete</button> 
</script> 

Iは、上記accepted answerを使用し、それがうまく働きました。我々は生産に移動し、ページあたりの行が500へ20から変更されたときしかし、後に、私はChromeデベロッパーツールを通じて大幅なパフォーマンスの問題を見て（setTimerの何百とリスナーイベントに費やした多くの時間）

私は公式文書hereを見つけましたこれは以下のように私たちの例を与える：

.withOption('createdRow', createdRow); 

// ... 

function createdRow(row, data, dataIndex) { 
    // Recompiling so we can bind Angular directive to the DT 
    $compile(angular.element(row).contents())($scope); 
} 

コードのこの作品は、$timeoutまたは$apply機能を使用していますが、まだうまく機能しません。私が行ったようにパフォーマンスの問題に遭遇した場合、これが役立つかもしれません。