Angular - événement de ligne de clic Datatable

Question

Je travaille avec AngularJS et angular-datable et je veux travailler avec l'événement dans une rangée, j'ai configuré le contrôleur pour écouter l'événement mais ce n'est pas le travail. Mon code est:

html

<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); 
     } 
); 
}); 

app.js

'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', 
    }); 
}); 

Merci pour tous.

Answer 1

Puisque vous utilisez la manière angulaire pour le rendu, pourquoi ne pas utiliser ng-click ainsi:

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

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

Answer 2

Vous étiez presque. L'élément de ligne est accessible depuis la fonction de rappel de ligne sous la forme nRow.

Ainsi, par exemple, vous pouvez par exemple changer la couleur de la ligne par la classe sélectionnée basculer comme suit

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

nRow vous donne accès à l'élément de ligne.

Puis il y a unData qui vous donne un tableau contenant les valeurs des éléments td ou column de cette ligne.

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

Answer 3

Je te vois manquer fonction dans votre code:

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; 
} 

et ne pas oublier ceci:

vm.someClickHandler = someClickHandler; 

vous pouvez lire le document dans here

Espoir vous aide .