ng-click không hoạt động AngularJS và dataTables

Question

Tôi đã viết một chỉ thị dataTables cho AngularJS. Làm việc tốt của nó ngoại trừ việc tôi cố gắng để thêm một nút vào hàng mà loại bỏ một hàng với một ng-click.

Theo tôi, vấn đề xảy ra vì hàng của bảng hiện không nằm trong phạm vi.

Ai đó có thể giúp tôi giải quyết vấn đề này.

jsFiddle Ví dụ: http://jsfiddle.net/A5Zvh/7/

chỉ thị của tôi trông như thế này.

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

Chức năng xóa trong điều khiển của bạn không được gọi vì AngularJS không biết gì về chèn DataTables của những yếu tố để DOM, do đó ngClick chỉ trong những yếu tố không được biên dịch và liên kết. Vì vậy, thay đổi:

dataTable.fnAddData(data.aaData); 

Để

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

Và để bơm $ biên dịch dịch vụ:

.directive('datatable', function() { 

Để

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

Và chức năng xóa của bạn bị hỏng trong jsFiddle, hy vọng đó không phải là trường hợp trong proj thực tế của bạn ect!

Answer 2

Bạn có thể muốn xem qua vài bài đăng đầu tiên của Zdam trên this Google Groups thread, đặc biệt là với hai liên kết jsFiddles của anh ấy/cô ấy. Về cơ bản tôi đã sao chép chúng và chúng hoạt động ở mức cơ bản. Tôi chưa thử thực hiện một số hành động bắt đầu từ một nhấp chuột trên một hàng.

Tôi thấy rằng bạn đã triển khai một cách tiếp cận hơi khác, tái tạo lại toàn bộ nút HTML <table>. Không chắc chắn nếu điều này gây ra sự cố.

Nhân tiện, trong cuộc gọi scope.$watch tôi phải đảm bảo có tham số thứ ba được đặt thành true, để so sánh giá trị (thay vì so sánh tham chiếu) trên đối tượng $ resource trả về. Không chắc tại sao bạn không cần điều đó.

Answer 3

Tôi đã giải quyết vấn đề này bằng cách thực hiện từng bước và gọi $ compile. Sử dụng hàm gọi lại hàng có thể đặt hàng. Hi vọng điêu nay co ich.

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 được cung cấp trong aoColumns hoặc fnCreatedRow cung cấp cho mRender

1) fnCreatedCell là cột dựa

ví dụ:

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 là một 'đầu mức 'gọi lại

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

Tôi đang sử dụng Angular-datatbles và tôi đang cố gắng thêm động, Chỉnh sửa & Xóa liên kết đến các hàng dữ liệu và hiển thị phương thức trên ng-click;

Đây là giải pháp cho trường hợp của tôi;

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

Tất cả mã ràng buộc về mặt dữ liệu;

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