时间戳

首页 > 解决方案 > Angular Js Ng-Click中的JQuery数据表不起作用？

angularjs-directive - Angular Js Ng-Click中的JQuery数据表不起作用？

问题描述

我有一个 DataTable，我正在使用 Angular Js 加载它，我创建了一个指令并将我的 DataTable 包装在这个指令中，一种在指令中包装 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");
}

标签： angularjs-directivedatatables

解决方案

Angular 不知道您已将元素注入 DOM。你必须$compile每一行。你可以在rowCallback. 由于 DataTables 可能会在表被过滤、排序或页面更改时注入新行，因此您可以添加一个compiled标志来防止行被 $compiled 多次：

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

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

推荐阅读