ng-click不起作用AngularJS和dataTables

Question

我爲AngularJS寫了一個dataTables指令。它的工作正常，除了我試圖添加一個按鈕到行刪除與ng點擊行。

在我看來，問題的發生是因爲表格行現在不在範圍內。

有人可以幫我解決這個問題。

的jsfiddle例子：http://jsfiddle.net/A5Zvh/7/

我的指令看起來是這樣的。

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

在控制器刪除功能不被調用，因爲AngularJS不知道數據表的插入這些元素的DOM的任何東西，因此這些元素中ngClick指令未編譯和鏈接。所以改變：

dataTable.fnAddData(data.aaData); 

要

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

並注入$編譯服務：

.directive('datatable', function() { 

要

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

而且你刪除功能在的jsfiddle打破，希望在你的實際項目中不是這種情況ECT！

Answer 2

你可能想看看第一對Zdam的帖子this Google Groups thread，特別是他/她的兩個鏈接的jsFiddles。我基本上覆制他們，他們在基本水平上工作。我還沒有嘗試過從點擊一行開始採取一些行動。

我看到你實現了一個稍微不同的方法，完全重新創建了<table> HTML節點。不知道這是否導致問題。

順便說一句，在scope.$watch調用，我不得不確保有第三個參數設置爲true，以便對返回的資源$ object進行值比較（而不是參考比較）。不知道你爲什麼不需要這個。

Answer 3

我通過遍歷每個td並調用$ compile來解決此問題。使用數據錶行回調函數。希望這可以幫助。

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在aoColumns供給或fnCreatedRow供給到mRender

1）fnCreatedCell是基於列

例如：

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是「頂level'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

我使用的是Angular-datatbles，我試圖動態添加，編輯&刪除指向數據行的鏈接並在ng-click上顯示模態;

這是我的案子的解決方案;

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

所有的數據表綁定代碼;

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