从通过Angularjs指令中包含的jquery数据表呈现的html绑定ng-click

Question

我在我的应用程序中使用jquery datatables来显示记录。我编写了一个angularjs自定义指令来包装jquery-datatable。请注意，我正在生成html代码以通过jquery-datatable函数呈现“复选框”。

以下是我的指示：

'use strict';
angular.module('myApp')
 .directive('iDataGrid', function () {
    return {
      templateUrl: 'app/iDataGrid/iDataGrid.html',
      restrict: 'EA',
      link: function (scope, element, attrs) {

      scope.$watch('newHosts', function(){
        var table=$('#dataTables-example').dataTable( {
          "jQueryUI": true,
          "sPaginationType": "full_numbers",
          "aaData": scope.newHosts,
          "bFilter": true,
          "oSearch": {"bRegex":true, "bSmart": false},
          "destroy": true,
          "aoColumns": [
              { "mData": " " },
              { "mData": "name" },
              { "mData": "age" },
              { "mData": "location" },
              { "mData": "environment" },
              { "mData": "changes_summary"}
          ],
          "aoColumnDefs": [
              {
                "aTargets": [ 0 ],
                "mRender" : function(data,type,full) {
                    return '<input type="checkbox" id="user_id" name=username"
                     onclick="clickhandle(\''+full.user_Id+'\', \''+full.name+'\');"/>';
                }
              }
           ]
        });
        var table = $('#dataTables-example').dataTable();
       }
     );
    }
    };
});

加载数据的模板（指向 - iDataGrid.html的模板）：

<table id ="dataTables-example"  class="table table-striped table-bordered">
  <thead>
    <tr>
      <th>Select</th>
      <th>Name</th>
      <th>Age</th>
      <th>Location</th>
      <th>Environment</th>
      <th># Changes</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

在我的html文件中，我使用指令：    <i-data-grid></i-data-grid>

现在，当我在浏览器中选中复选框时，我无法处理指令中的ng-click事件以及控制器。

有人能让我知道我哪里出错了。