Question

我有一个角度应用程序，它也使用 jquery.dataTables 。当我使用 datatables 在表数据中使用ng-click angular指令构建动态表时，它不会触发ng-click事件。

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

非常感谢任何帮助。

UPDATE ：我在DataTables方法的createdRow选项中添加了一些代码。我好像现在正在开火，但是我收到了错误

0x800a01b6 - JavaScript运行时错误：对象不支持属性或方法＆＃39; $ apply＆＃39;

这是我的代码：

＆＃13;

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');
    };

  }
]);

＆＃13;

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

＆＃13;

<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>

＆＃13;

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);

如果您运行下面的代码段，则可以看到它按预期运行。

＆＃13;

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');
    };

  }
]);

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

对于那些想要从外部角度访问$ compile和$ scope并将其应用于数据表行的人..在这里，我有答案

"fnRowCallback": function( nRow, aData, iDisplayIndex ) {

  var $injector = angular.element(document.body).injector();
  var scope = angular.element(document.body).scope();
            
  $injector.invoke(function($compile) {
    $compile(nRow)(scope);
  });
            
},

您可以将每个ng事件添加到该行，它将起作用！：D

Answer 3

全部用于Jquery数据表。

ft_model = FastText(word_tokenized_corpus,
                      size=embedding_size,
                      window=window_size,
                      min_count=min_word,
                      sample=down_sampling,
                      sg=1,
                      iter=100)

这样写

"Link": "<button type=\"button\" ng-click=\"Ctrl.dataTablesAlert()\">Test Alert</a>"
createdRow: function(row, data, dataIndex) {
    $compile(angular.element(row).contents())(_this);
)

这解决了我的Jquery数据表问题

但是，如果您拥有angulrjs数据表，并且无法使用 ng-click 或其他angulrjs事件，则只需要编译

  "Link": "<button type='button' ng-click='Ctrl.dataTablesAlert()'>Test Alert</a>"
    createdRow: function(row, data, dataIndex) {
        $compile(angular.element(row).contents())(_this);
        $compile(angular.element(data).contents())(_this);
    )

Angular`ng-click`无法在DataTables表行

3 个答案: