JQuery Angular 中的数据表 Js Ng-Click 不工作？

Question

我有一个数据表，我正在使用 Angular Js 加载它，我创建了一个指令并将我的数据表包装在该指令中，一种在指令中包装 JQuery 插件的常用方法，以便它可以住在 Angular Digest Cycle。但是按钮上的 ng-click 来自数据表中的 render Function of column 不是 clickable（不工作，Angular 没有编译它）。有什么办法可以做到Clickable。我知道我们使用 {{}} with ng-repeat 在数据表中填充数据的方法。我正在寻找 directive way，所以你可以告诉我是什么阻止了 ng-click 的工作或者如何使我的指令正确！请坚持使用指令方法。代码如下。

App.directive('jqtable', function () {
return {
    restrict: 'E, A, C',
    link: function (scope, element, attrs, controller) {
        var dataTable = element.dataTable(scope.options);
         scope.$watch('options.data',  handleModelUpdates, true);
            function handleModelUpdates(newData) {
            var data = newData || null;
            if (data) {
                dataTable.fnClearTable();
                dataTable.fnAddData(data);
            }
        }
    },
    scope: {
        options: "="
    }
};

});

这是我的控制器：-

$scope.options = {
   aoColumnDefs: [{
        "bSortable": true,
        "aTargets": [ 1],
        "render": function ( data, type, full, meta ) {
            if(meta.col==1){
                return data+" <a class='btn btn-sm btn-default' ng-click='showalert()' >Click me </a>"
            }
        }
    }],
    bJQueryUI: true,
    bDestroy: true,
    data:$scope.data                        
};
$scope.showalert=()=>
{
    alert("Angular Compiled the Html");
}

Answer 1

Angular 不知道您已经向 DOM 注入了元素。每行必须 $compile。您可以在 rowCallback 中做到这一点。由于 DataTables 可能会在 table 被过滤、排序或页面更改时注入新行，因此您可以添加一个 compiled 标志以防止行被多次编译 $:

$scope.options = {
  rowCallback: function(row) {  
    if (!row.compiled) {
      $compile(angular.element(row))($scope);
      row.compiled = true;  
    }  
  }
  ...
}

见http://next.plnkr.co/edit/KxwqSVXIogtXYx4I

JQuery Angular 中的数据表 Js Ng-Click 不工作？

JQuery Datatable in Angular Js Ng-Click not Working?

datatables

angularjs-directive