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

这里需要做的两件事是将 $compile 和 $scope 注入控制器，然后使用它们.//这里使用数组注入符号app.controller('myCtrl',['$scope','$compile',函数($scope，$compile){//剪...}]);然后当你链接你的行时，你可以像这样使用注入的 $scope 调用它:$compile(angular.element(row).contents())($scope);如果您运行下面的代码段，您可以看到一切都按预期运行.var app = angular.module('appy', []);app.controller('myCtrl', ['$scope','$compile',函数($scope，$compile){var _this = this;$('#report').DataTable({数据: [{"LastName": "母鹿","链接": "Test Alert"}],列: [{"title": "姓氏",数据":姓氏"}, {"title": "动作",数据链接"}],createdRow:函数(行，数据，数据索引){$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 {边距顶部:15px；填充:5px；}div.borderdiv {边框:1px纯黑色；}TD{边框:1px纯黑色；填充:2px}.成功 {背景颜色:绿色；}<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>带有 ng-click 的按钮</h4><button type="button" ng-click="Ctrl.buttonAlert()">测试警报</button><div id="htmltablediv" class="borderdiv"><h4>带有 ng-click 的 HTML 表格</h4><表格><tr><td>姓氏</td><td>动作</td></tr><tr><td>Doe</td><td><button ng-click="Ctrl.htmlAlert()">测试警报</td></tr><div id="datatablediv" class="borderdiv"><h4>数据表和 ng-click</h4><table id="report" class="display"></table>I have an angular application that is also using jquery.dataTables. When I use datatables to build a dynamic table with the ng-click angular directive in the table data, it does not fire the ng-click event.I suspect that I need to use the angular $compile service, but I have not been successful finding clear documentation or examples.Any help would be greatly appreciated.UPDATE: I have added some code to the createdRow option in the DataTables method. I seems to be firing now, but I get an errorHere is my code: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 takes in a snippet of HTML and returns what's known as a linking function. This function takes a $scope that will it will use to do all the databinding.This might have been confusing since you are using the controller as syntax (which is a good thing), so you don't deal directly $scope.The two things you need to do here are to inject both $compile and $scope into your controller, and then use them.//Using array injector notation hereapp.controller('myCtrl',['$scope','$compile', function($scope, $compile) { //snip... }]);And then later when you are linking your row, you can call it with the injected $scope like this:$compile(angular.element(row).contents())($scope);If you run the snippet below, you can see it all works as expected.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> 这篇关于Angular `ng-click` 在 DataTables 表格行中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！