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 error
0x800a01b6 - JavaScript runtime error: Object doesn't support property
or method '$apply'
Here 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 here
app.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>
this all for Jquery datatable.
"Link": "<button type=\"button\" ng-click=\"Ctrl.dataTablesAlert()\">Test Alert</a>"
createdRow: function(row, data, dataIndex) {
$compile(angular.element(row).contents())(_this);
)
write like 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);
)
this resolve my problem for Jquery datatable
but if you have angulrjs datatable and you are unable to work with ng-click or other events of angulrjs then you just have to compile what like
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);
}
}
For those who wants to access $compile and $scope from outside angular and apply it to the datatable rows.. here I have the answer
"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);
});
},
with this you can add every ng event to the row and it will work! :D
