ng-click 不适用于 Datatable 和 Angular Js

Question

我已经阅读了几个类似的问题，但没有一个对我有用。我正在使用带有角度 js 的 laravel-datatable。但是“ng-click”不适用于动态生成的数据表按钮。我读到了 $compile 但不知道如何用表来实现它。我对 Angular js 很陌生。

当我点击按钮时，什么也没有发生。

app.controller('myController', ['$scope','$compile', function($scope, $compile) {

$('#stafftbl').DataTable( {
      paging: true,
      "ordering": true,
      "searching": true,
      "bInfo" : true,
      deferRender: true,
      ajax: 'get_staffsalary',
      columns: [
          { data: 'staff_num', name: 'staff_num'},
          { data: 'staffname ', name: 'staffname' },
          { data: 'salary', name: 'salary' },
          { data: 'date_effected', name: 'date_effected' },
          { data: 'updated_at', name: 'updated_at' },
          { data: null, render: function (data, type, full) {
                  return '<button class="btn btn-xs btn-primary" ng-click="update('+full.id+')">Update Salary</button> ';
          }},

      ],

  });

   $scope.update= function (id) {
        alert(id)
    }
 }]);

请帮忙？

Answer 1

是的，你是正确的，你需要使用 $compile。

在动态添加带有 angular 属性的 html 后，就像您使用数据表一样，您必须调用 $compile 以便 angular 可以获取属性。

您需要在 $scope 之后将 $compile 服务注入您的控制器。然后，在添加 HTML 之后，您需要编译新的 DOM 并将其链接到范围，方法是在控制器的上下文中调用 $compile(new_html)($scope)。

参考$compile doco

Answer 2

我使用 @MJL 的回答解决了这个问题。这是完整的代码块，它可能会帮助其他人

app.controller('myCtrl', ['$scope','$compile', function($scope, $compile) {

var table = $('#stafftbl').DataTable( {
    processing: false,
    serverSide: false,
    deferRender: true,
    ajax: 'get_staffsalary',
    columns: [
        { data: 'staff_num', name: 'staff_num'},
        { data: 'salary', name: 'salary' },
        { data: 'date_effected', name: 'date_effected' },
        { data: 'updated_at', name: 'updated_at' },
        { data: null, render: function (data, type, full) {
            return '<button class="btn btn-xs btn-primary text-size-small" ng-click="clickme()>Update</button> ';
        }},

    ],
    "createdRow": function ( row, data, index ) {
        $compile(row)($scope);  //add this to compile the DOM
    }

})

 $scope.clickme = function () {
   alert('clicked me')
}
}]);