Question

我已经阅读了几个类似的问题但在这个问题上没有一个对我有效。我正在使用具有角度js的laravel-datatable。但是点击了＆＃39;不适用于动态生成的数据表按钮。我读了关于$ compile但不知道如何用表实现它。对角度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。

在动态添加带有角度属性的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')
}
}]);

ng-click不使用Datatable和Angular Js

2 个答案: