ng-click funktioniert nicht AngularJS und dataTables

Question

Ich habe eine DataTables-Direktive für AngularJS geschrieben. Es funktioniert gut außer, dass ich versuche, eine Schaltfläche zu der Zeile hinzuzufügen, die eine Zeile mit einem ng-Klick entfernt.

Meiner Meinung nach tritt das Problem auf, weil die Tabellenzeile jetzt nicht den Bereich betrifft.

Kann jemand mir helfen, dieses Problem zu lösen.

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

Meine Richtlinie sieht wie folgt aus.

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

Die Löschfunktion in Ihrem Controller innerhalb dieser nicht, weil AngularJS weiß nichts über Tables die Einfügung dieser Elemente auf das DOM, so ngClick Richtlinie Elemente nicht kompiliert und verknüpft genannt wird. So ändern:

dataTable.fnAddData(data.aaData); 

Um

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

Und zu injizieren $ service kompilieren:

.directive('datatable', function() { 

Um

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

Und Ihre Löschfunktion ist in der jsFiddle gebrochen, hoffe, dass das in deinem aktuellen Projekt nicht der Fall ist ect!

Answer 2

Sie möchten vielleicht einen Blick auf die ersten paar Zdams Beitrag auf this Google Groups thread, vor allem auf seine/ihre beiden verbundenen jsFiddles werfen. Ich habe sie grundsätzlich kopiert und sie arbeiten auf einer einfachen Ebene. Ich habe noch nicht versucht, etwas zu tun, angefangen mit einem Klick auf eine Zeile.

Ich sehe, dass Sie einen etwas anderen Ansatz implementiert haben, den HTML-Knoten <table> insgesamt neu erstellen. Nicht sicher, ob dies Probleme verursacht.

Übrigens musste ich auf dem scope.$watch Aufruf sicherstellen, dass es einen dritten Parametersatz auf True gab, um einen Wertvergleich (anstelle des Referenzvergleichs) auf der zurückgegebenen Ressource $ object durchzuführen. Nicht sicher, warum du das nicht brauchst.

Answer 3

Ich löste dies, indem ich jeden td durchlaufen und $ kompilieren. Verwenden der Rückruffunktion für Datentypen. Hoffe das hilft.

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 in aoColumns oder fnCreatedRow geliefert werden geliefert

1) fnCreatedCell ist mRender Spalte basiert

ex:

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 ist ein ‚top Level 'Rückruf

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

Ich verwende Angular-datatbles, und ich habe versucht, dynamisch hinzuzufügen, auf Bearbeiten & Links entfernen in den datatble Zeilen und zeigt modal auf ng-Klick;

Das war die Lösung für meinen Fall;

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

Alle Datatable-Bindungscodes;

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