Angular Js中的JQuery数据库Ng-Click无法正常工作？

Posted 2021-05-04

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

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

答案

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

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

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