我有一个角度应用程序,也使用
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>
