Question

我有一个DataTable，并且正在使用Angular Js加载它，我创建了一个指令并将DataTable封装在该指令中，这是一种将JQuery Plugin封装在Directive中以便它可以驻留在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可能会在对表进行过滤，排序或页面更改时注入新行，因此可以添加compiled标志以防止对行进行$$多次编译：

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

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

Angular Js中的jQuery Datatable Ng-Click不起作用吗？

1 个答案: