Angular - Datatableのクリック行イベント

Question

AngularJSと角度データ型で作業しています。イベントを連続して処理したいので、イベントを聴くようにコントローラを設定しましたが、動作しません。私のコードは次のとおりです。

<div class="panel panel-flat"> 
    <div class="panel-heading"> 
     <h6 class="panel-title">Planilla</h6> 
    </div> 
    <div class="panel-heading"> 
    <table class="table datatable-basic table-hover" datatable="ng" dt-options="empleadoList.dtOptions" dt-column-defs="empleadoList.dtColumnDefs" > 
     <thead> 
      <tr> 
       <th style="width: 30px;">Nro.</th> 
       <th>Nombre Completo</th> 
       <th class="col-md-2">DNI</th> 
       <th class="col-md-2">Celular</th> 
       <th class="col-md-2">Teléfono</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr ng-repeat="empleado in empleadoList.empleados"> 
       <td style="width: 30px;">{{$index + 1}}</td> 
       <td> <span class="text-muted"><i class="icon-user"></i>{{empleado.apellidoPaterno}} {{empleado.apellidoMaterno}} {{empleado.nombre}}</span></td> 
       <td><span class="text-success-600"><span class="status-mark border-blue position-left"></span>{{empleado.dni}}</span></td> 
       <td><span class="text-success-600"><i class="icon-mobile position-left"></i> {{empleado.celular}}</span></td> 
       <td><h6 class="text-semibold"><i class="icon-phone position-left"></i> {{empleado.telefono}}</h6></td> 
      </tr> 
     </tbody> 
    </table> 
    </div> 
</div> 

controller.js

App.controller('EmpleadoListController', function($scope,$resource,EmpleadoService,DTOptionsBuilder,DTColumnDefBuilder) { 

$scope.dtOptions = DTOptionsBuilder.newOptions() 
    .withDisplayLength(10) 
    .withOption('bLengthChange', false) 
    .withPaginationType('full_numbers') 
    .withOption('rowCallback', rowCallback); 
$scope.dtColumnDefs = [ 
        DTColumnDefBuilder.newColumnDef(0), 
        DTColumnDefBuilder.newColumnDef(1), 
        DTColumnDefBuilder.newColumnDef(2), 
        DTColumnDefBuilder.newColumnDef(3), 
        DTColumnDefBuilder.newColumnDef(4) 
       ]; 

function rowCallback(nRow, aData, iDisplayIndex, iDisplayIndexFull) { 
    $('td', nRow).unbind('click'); 
    $('td', nRow).bind('click', function() { 
     $scope.$apply(function() { 
      console.log('click row'); 
     }); 
    }); 
    return nRow; 
} 

EmpleadoService.fetch().then(
     function(response){ 
      return $scope.empleadoList = { empleados: response.data}; 
     }, 
     function(errResponse){ 
      console.error('Error while fetching users'); 
      return $q.reject(errResponse); 
     } 
); 
}); 

HTMLはすべてのための

'use strict'; 
var App = angular.module('myApp', ['ngRoute','ngResource','datatables']); 
App.config(function($routeProvider) { 
    var resolveEmpleados = { 
    empleados: function (EmpleadoService) { 
    return EmpleadoService.fetch(); 
    } 
}; 

$routeProvider 
.when('/planilla', { 
    controller:'EmpleadoListController as empleadoList', 
    templateUrl:'static/js/planilla.html', 
    }); 
}); 

感謝をapp.js。

Answer 1

あなたがレンダリングするための角度の方法を使用しているので、なぜ同様ng-clickを使用しない：

<tr ng-repeat="empleado in empleadoList.empleados" ng-click="click(empleado)"> 

$scope.click = function(empleado) { 
    console.log(empleado.apellidoPaterno+' clicked') 
} 

Answer 2

あなたは、ほとんどがありました。 row要素は、行のコールバック関数からnRowとしてアクセスできます。

$scope.$apply(function() { 
     $(nRow).toggleClass('selected'); 
     // do your stuff with the row here 
}); 

nRowは、次のようにインスタンスのインスタンスのために選択したクラスを切り替えることによって、行の色を変更することができます

を使用すると、行要素にアクセスすることができます。

次に、その行のtdまたはcolumn要素の値を含む配列を与えるaDataがあります。

function someClickHandler(info) { 
    vm.message = info.id + ' - ' + info.firstName; 
} 

function rowCallback(nRow, aData, iDisplayIndex, iDisplayIndexFull) { 
    // Unbind first in order to avoid any duplicate handler (see https://github.com/l-lin/angular-datatables/issues/87) 
    $('td', nRow).unbind('click'); 
    $('td', nRow).bind('click', function() { 
     $scope.$apply(function() { 
      vm.someClickHandler(aData); 
     }); 
    }); 
    return nRow; 
} 

と、このことを忘れないでください：

に

vm.someClickHandler = someClickHandler; 

をあなたがhere

ホープヘルプのドキュメントを読むことができる私はあなたのコード内の関数を欠場見

$scope.$apply(function() { 
     console.log(aData); 
     // do your stuff with the row here 
}); 

Answer 3

。