ng-click non funzionante AngularJS e dataTables

Question

Ho scritto una direttiva dataTables per AngularJS. Funziona bene, tranne che sto cercando di aggiungere un pulsante alla riga che rimuove una riga con un ng-clic.

A mio parere è che il problema si verifica perché la riga della tabella non ora l'ambito.

Qualcuno può aiutarmi a risolvere questo problema.

jsFiddle Esempio: http://jsfiddle.net/A5Zvh/7/

mia direttiva simile a questa.

angular.module('DataTables', []) 
.directive('datatable', function() { 
    return { 
     restrict: 'E', 
     transclude: true, 
     replace: true, 
     require: 'ngModel', 
     template: '<table></table>', 
     link: function(scope, element, attrs, model) { 
      var dataTable = null, 
       options; 

      var buttons = jQuery.parseJSON(attrs['buttons']) || null; 

      options = { 
        "bJQueryUI": false, 
        "sDom": "<'row-fluid'<'span4'l><'span8 filter' <'pull-right'T> <'pull-right'f>>r>t<'row-fluid'<'span6'i><'span6'p>>", 
        "sPaginationType": "bootstrap", 
        "oTableTools": { 
        } 
       }; 

      if(_.has(attrs, 'datatableOptions')) { 
       jQuery.extend(true, options, scope.$eval(attrs['datatableOptions'])); 
      } 

      scope.$watch(attrs.ngModel, function(data) { 
       if(data && _.size(data.aaData) > 0 && _.size(data.aoColumns) > 0) { 

        _.extend(options, scope.$eval(attrs.ngModel)) 
        dataTable = $(element).dataTable(options); 
        dataTable.fnClearTable(); 
        dataTable.fnAddData(data.aaData); 
       } 
      }); 
     } 
    } 
}) 

Answer 1

La funzione di eliminazione nel vostro controller non si chiama perché AngularJS non sa nulla circa l'inserimento di questi elementi al DOM della DataTable, in tal modo direttiva ngClick all'interno di questi elementi non è compilato e collegato. Quindi cambiare:

dataTable.fnAddData(data.aaData); 

Per

dataTable.fnAddData(data.aaData); 
$compile(element)(scope); 

E per iniettare $ compilazione servizio:

.directive('datatable', function() { 

Per

.directive('datatable', function ($compile) { 

E la vostra funzione di eliminazione è rotto nel jsFiddle, spero che non sia il caso del tuo vero proj ect!

Answer 2

Si potrebbe dare un'occhiata al primo paio di post di Zdam su this Google Groups thread, in particolare ai suoi due jsFiddles collegati. Fondamentalmente li ho copiati e funzionano a un livello base. Non ho ancora provato a ottenere un'azione a partire da un clic su una riga.

Vedo che avete implementato un approccio leggermente diverso, ricreando del tutto il nodo HTML <table>. Non sono sicuro se questo sta causando problemi.

A proposito, sulla chiamata scope.$watch ho dovuto verificare che un terzo parametro fosse impostato su true, in modo da rendere il confronto dei valori (anziché il confronto dei riferimenti) sull'oggetto $ resource restituito. Non sono sicuro del perché non ne hai bisogno.

Answer 3

Ho risolto questo passando attraverso ogni td e chiamando $ compilare. Utilizzando la funzione di callback delle righe datatable. Spero che questo ti aiuti.

options.fnCreatedCell = function (nTd, sData, oData, iRow, iCol) { 
    $compile(nTd)($scope); 
} 

//or row 

options.fnCreatedRow = function(nRow, aData, iDataIndex) { 
    $compile(nRow)($scope); 
} 

Answer 4

fnCreatedCell essere forniti in aoColumns o fnCreatedRow alimentata al mRender

1) fnCreatedCell è colonna basata

es:

tableElement.dataTable({ 
       "bDestroy": true, 
       oLanguage : { 
         sLengthMenu : '_MENU_ records per page' 
       }, 
       aoColumnDefs: [ 
     { 
       bSortable: false, 
       aTargets: [ -1,-2,-3 ], 
       "fnCreatedCell": function (nTd, sData, oData, iRow, iCol)   
         { 
          $compile(nTd)($scope) 
          } 
      } 
     ], 

2) fnCreatedRow è un 'all'inizio livello 'callback

tableElement.dataTable({ 
       "bDestroy": true, 
       oLanguage : { 
         sLengthMenu : '_MENU_ records per page' 
       }, 
     aoColumnDefs: [ 
     { 
      bSortable: false, 
      aTargets: [ -1,-2,-3 ] 
     } 
     ], 
     "fnCreatedRow": function(nRow, aData, iDataIndex){ 
        compile(nRow)(scope); 
      }, 

Answer 5

sto usando Angular-datatbles, e stavo cercando di aggiungere dinamicamente, Modifica & Eliminare collegamenti alle righe datatble e visualizzare modali sul ng-click;

Questa era la soluzione per il mio caso;

$scope.dtOptions.withOption('fnRowCallback', 
    function (nRow, aData, iDisplayIndex, iDisplayIndexFull) { 
     $compile(nRow)($scope); 
    }); 

Tutti i dati del codice di associazione;

$scope.reloadData = function() { 
    $scope.dtOptions.reloadData(); 
}; 

$scope.dtColumnDefs = [ 

    DTColumnDefBuilder.newColumnDef(2).renderWith(function (data, type, row) { 
     var html = '<a href="" class="txt-color-blue pull-left" ng-click="editModal()"><i class="fa fa-pencil hidden-xs"></i> Edit</a>' + 
        '<a href="" class="txt-color-red padding-top-15" ng-click="removeModal()"><i class="fa fa-times hidden-xs"></i> Remove</a>'; 
     return html; 
    }) 
]; 

$scope.dtColumns = [ 
    DTColumnBuilder.newColumn('name').withTitle('Name'), 
    DTColumnBuilder.newColumn('type').withTitle('Type'), 
    DTColumnBuilder.newColumn('id').withTitle(''), 
]; 

$scope.dtOptions.withOption('fnRowCallback', 
    function (nRow, aData, iDisplayIndex, iDisplayIndexFull) { 
     $compile(nRow)($scope); 
    });