ng-click nie działa AngularJS i DataTables

Question

Napisałem dyrektywę dataTables dla AngularJS. Działa dobrze, z wyjątkiem tego, że próbuję dodać przycisk do rzędu, który usuwa wiersz za pomocą ng-kliknięcia.

Moim zdaniem problem występuje, ponieważ wiersz tabeli nie obejmuje teraz zakresu.

Czy ktoś może mi pomóc rozwiązać ten problem.

jsFiddle Przykład: http://jsfiddle.net/A5Zvh/7/

Moja dyrektywa wygląda następująco.

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

funkcji Delete w kontrolerze nie nazywa bo angularjs nie wie nic o wstawienie DataTables męska tych elementów do DOM wiedzieć, co dyrektywa ngClick ciągu tych elementów nie jest kompilowany i połączone. Tak zmienić:

dataTable.fnAddData(data.aaData); 

Aby

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

I wstrzyknąć $ skompilować usługę:

.directive('datatable', function() { 

Do

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

A twój kasowania funkcja jest uszkodzony w jsFiddle, mam nadzieję, że tak nie jest w twoim rzeczywistym projekcie ect!

Answer 2

Być może zechcesz rzucić okiem na kilka pierwszych postów Zdama na this Google Groups thread, szczególnie na jego/jej dwóch połączonych jsFiddles. Zasadniczo skopiowałem je i działają one na podstawowym poziomie. Nie próbowałem jeszcze wykonać jakiegoś działania, zaczynając od kliknięcia rzędu.

Widzę, że zaimplementowałeś nieco inne podejście, całkowicie odtwarzając węzeł HTML <table>. Nie wiem, czy to powoduje problemy.

Przy okazji, na wywołanie scope.$watch musiałem upewnić się, że istnieje trzeci zestaw parametrów do wartości true, w celu dokonania porównania wartości (zamiast porównania odniesienia) na zwróconym obiekcie resource $. Nie wiem, dlaczego tego nie potrzebujesz.

Answer 3

Rozwiązałem to, przechodząc przez każdy td i wywołując $ compile. Korzystanie z funkcji wywołania zwrotnego z wiersza danych. Mam nadzieję że to pomoże.

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 być dostarczane w aoColumns lub fnCreatedRow dostarczane mRender

1) fnCreatedCell jest kolumna na bazie

Np

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 jest „do góry poziom '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

Używam Angular-datatbles, a ja starałem się dynamicznie dodawać, edytować & Usuń linki do datatble wierszy i wyświetlić modalne na ng kliknięcie;

To było rozwiązanie dla mojej sprawy;

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

Wszystkie możliwe do zniesienia kody;

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