Angular`ng-click`在DataTables表行中不起作用

Question

我有一个角度应用程序,也使用jquery.dataTables.当我使用数据表建立一个动态表与ng-click表中的数据角指令,它不火的ng-click事件.

我怀疑我需要使用角度$compile服务,但我没有成功找到明确的文档或示例.

任何帮助将不胜感激.

更新:我已经在DataTables方法的createdRow选项中添加了一些代码.我好像现在正在开火,但是我收到了一个错误

0x800a01b6 - JavaScript运行时错误:对象不支持属性或方法'$ apply'

这是我的代码:

var app = angular.module('appy', []);
app.controller('myCtrl', [
  function() {
    var _this = this;

    $('#report').DataTable({
      data: [{
        "LastName": "Doe",
        "Link": "<button type=\"button\" ng-click=\"Ctrl.dataTablesAlert()\">Test Alert</a>"
      }],
      columns: [{
        "title": "Last Name",
        "data": "LastName"
      }, {
        "title": "Actions",
        "data": "Link"
      }],
      createdRow: function(row, data, dataIndex) {
        $compile(angular.element(row).contents())(_this);
      }
    });

    this.buttonAlert = function() {
      $('#buttondiv').addClass('success');
    };

    this.htmlAlert = function() {
      $('#htmltablediv').addClass('success');
    };

    this.dataTablesAlert = function() {
      $('#datatablediv').addClass('success');
    };

  }
]);

  div {
    margin-top: 15px;
    padding: 5px;
  }
  div.borderdiv {
    border: 1px solid black;
  }
  td {
    border: 1px solid black;
    padding: 2px
  }
  .success {
    background-color: green;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="appy" ng-controller="myCtrl as Ctrl">
  <div id="buttondiv" class=borderdiv>
    <h4>Button with ng-click</h4>
    <button type="button" ng-click="Ctrl.buttonAlert()">Test Alert</button>
  </div>

  <div id="htmltablediv" class="borderdiv">
    <h4>HTML Table with ng-click</h4>
    <table>
      <tr>
        <td>Last Name</td>
        <td>Actions</td>
      </tr>
      <tr>
        <td>Doe</td>
        <td>
          <button ng-click="Ctrl.htmlAlert()">
            Test Alert
          </button>
        </td>
      </tr>
    </table>
  </div>

  <div id="datatablediv" class="borderdiv">
    <h4>DataTables with ng-click</h4>
    <table id="report" class="display"></table>
  </div>

</div>

Answer 1

$compile接收一段HTML并返回所谓的链接功能.此函数$scope将使用它来执行所有数据绑定.

这可能令人困惑,因为您使用控制器作为语法(这是一件好事),因此您不直接处理$scope.

你需要做的两件事情是注入都$compile和$scope到控制器中,然后使用它们.

//Using array injector notation here
app.controller('myCtrl', 
['$scope','$compile',
  function($scope, $compile) {
     //snip...
  }
]);

然后当你链接你的行时,可以$scope像这样注入它来调用它:

$compile(angular.element(row).contents())($scope);

如果您运行下面的代码段,您可以看到它按预期工作.

var app = angular.module('appy', []);
app.controller('myCtrl', ['$scope','$compile',
  function($scope, $compile) {
    var _this = this;

    $('#report').DataTable({
      data: [{
        "LastName": "Doe",
        "Link": "<button type=\"button\" ng-click=\"Ctrl.dataTablesAlert()\">Test Alert</a>"
      }],
      columns: [{
        "title": "Last Name",
        "data": "LastName"
      }, {
        "title": "Actions",
        "data": "Link"
      }],
      createdRow: function(row, data, dataIndex) {
        $compile(angular.element(row).contents())($scope);
      }
    });

    this.buttonAlert = function() {
      $('#buttondiv').addClass('success');
    };

    this.htmlAlert = function() {
      $('#htmltablediv').addClass('success');
    };

    this.dataTablesAlert = function() {
      $('#datatablediv').addClass('success');
    };

  }
]);

div {
    margin-top: 15px;
    padding: 5px;
  }
  div.borderdiv {
    border: 1px solid black;
  }
  td {
    border: 1px solid black;
    padding: 2px
  }
  .success {
    background-color: green;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="appy" ng-controller="myCtrl as Ctrl">
  <div id="buttondiv" class=borderdiv>
    <h4>Button with ng-click</h4>
    <button type="button" ng-click="Ctrl.buttonAlert()">Test Alert</button>
  </div>

  <div id="htmltablediv" class="borderdiv">
    <h4>HTML Table with ng-click</h4>
    <table>
      <tr>
        <td>Last Name</td>
        <td>Actions</td>
      </tr>
      <tr>
        <td>Doe</td>
        <td>
          <button ng-click="Ctrl.htmlAlert()">
            Test Alert
          </button>
        </td>
      </tr>
    </table>
  </div>

  <div id="datatablediv" class="borderdiv">
    <h4>DataTables with ng-click</h4>
    <table id="report" class="display"></table>
  </div>

</div>