Angular `ng-click` 在 DataTables 表行中不起作用
Posted
技术标签:
【中文标题】Angular `ng-click` 在 DataTables 表行中不起作用【英文标题】：Angular `ng-click` not working in DataTables table row 【发布时间】：2017-05-29 05:42:53 【问题描述】：我有一个 angular 应用程序，它也在使用 jquery.dataTables。当我使用 datatables 在表数据中使用 ng-click 角度指令构建动态表时，它不会触发 ng-click 事件。
我怀疑我需要使用 angular $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>【问题讨论】：
你检查过这个：***.com/questions/26819222/… 吗？ Ignacy Kasperowicz - 这是一篇好文章，但它没有解决我代码的数据表部分。 我对DataTables不够熟悉，无法给你一个解决方案，但我可以指出问题所在。您用于“链接”值的字符串："<button type=\"button\" ng-click=\"Ctrl.dataTablesAlert()\">Test Alert</a>" 没有被 Angular 编译。它是一个简单的字符串，由 JQuery 放置在 DOM 中，然后浏览器将其解释为 HTML，但它没有被 Angular 编译，因此不被识别为指令，或者被附加到范围你的控制器。
这并不能回答你的问题，但是当有这么多原生角度网格时，你为什么要使用 jQuery dataTables？
有一个值得一试的数据表的 Angular 包装器 - l-lin.github.io/angular-datatables/#/welcome。它融合了两个世界。我过去用过一点，似乎工作正常
【参考方案1】：
$compile 接受 HTML 的 sn-p 并返回所谓的链接函数。该函数接受一个$scope，它将用于执行所有数据绑定。
这可能会让人感到困惑，因为您使用的是 controller as 语法（这是一件好事），因此您不直接处理$scope。
您需要在此处做的两件事是将$compile 和$scope 注入您的控制器，然后使用它们。
//Using array injector notation here
app.controller('myCtrl',
['$scope','$compile',
function($scope, $compile)
//snip...
]);
然后当你链接你的行时，你可以像这样使用注入的$scope 调用它：
$compile(angular.element(row).contents())($scope);
如果你运行下面的 sn-p，你可以看到一切都按预期工作。
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>【讨论】：
你拯救了我的一天。【参考方案2】：这一切都是为了 Jquery 数据表。
"Link": "<button type=\"button\" ng-click=\"Ctrl.dataTablesAlert()\">Test Alert</a>"
createdRow: function(row, data, dataIndex)
$compile(angular.element(row).contents())(_this);
)
这样写
"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);
)
这解决了我对 Jquery 数据表的问题
但是如果你有 angulrjs 数据表并且你无法使用 ng-click 或其他 angulrjs 事件，那么你只需要编译类似的东西
app.controller('auditListController', function($scope, $compile)
html = "<a href='javascript:void(0)' ng-click='myfunction("+ myvariable + ")'><i class='icon fa fa-exchange' aria-hidden='true'></i></a>";
$compile(angular.element(html).contents())($scope);
$scope.myfunction = function (myvar)
console.log("myvar", myvar);
【讨论】：
【参考方案3】：对于那些想要从外部角度访问 $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
【讨论】：
您是否曾经单击过自己的“运行代码 sn-p”按钮一次？它产生的只是一个错误！以上是关于Angular `ng-click` 在 DataTables 表行中不起作用的主要内容，如果未能解决你的问题，请参考以下文章
Angular Js中的JQuery数据库Ng-Click无法正常工作？
Angular-material ng-click 奇怪的边框高亮