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

发布时间：2020-12-17 17:06:13 所属栏目：安全来源：网络整理

导读：我有一个角度应用程序,也使用 jquery.dataTables.当我使用数据表在表数据中使用ng-click angular指令构建动态表时,它不会触发ng-click事件. 我怀疑我需要使用angular $compile服务,但我没有成功找到明确的文档或示例. 任何帮助将不胜感激. 更新：我已经在Dat

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

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

任何帮助将不胜感激.

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

0x800a01b6 – JavaScript runtime error: Object doesn’t support property
or method ‘$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>

解决方法

$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',$compile) {
    var _this = this;

    $('#report').DataTable({
      data: [{
        "LastName": "Doe",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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!