Angularjs and dynamic html content in Datatables
I have an angular app where I have a Datatable. In the datatable, I change the cell content to contain the html content.
In the code below, I change the content of the cell of the 5th column to have links. I want to have a tooltip that informs the user about the link. I am using UI Bootstrap .
var app = angular.module('smsmanagement', ['ngRoute', 'ui.bootstrap']);
app.controller('RecipientsController', function ($scope, $http, $routeParams, $timeout, SweetAlert) {
var groupID = $routeParams.param;
$('#table-recipients-view').DataTable({
sDom: "<'row'<'col-sm-6'l><'col-sm-6'f>r>t<'row'<'col-sm-6'i><'col-sm-6'p>>",
"processing": true,
"serverSide": true,
"ajax": {
"url": "recipients/dt",
"data": function (d) {
d.groupID = groupID;
}
},
"fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
var groupLink = '';
// The number of columns to display in the datatable
var cols = 6;
var rowElementID = aData[(cols - 1)];
groupLink = '<a href="#smsgroups/' + rowElementID + '" uib-tooltip="View group(s)">' + noOfGroups + '</a>';
// Create a link in no of groups column
$(nRow).children('td:eq(' + (cols - 2) + ')').html(groupLink);
}
});
});
I added a directive uib-tooltip
to the groupLink
html content.
The problem is that the tooltip is not showing. I've heard of using it $compile
, but I'm not really sure how to use it.
source to share
You are correct about using compilation.
Try changing the following line:
$(nRow).children('td:eq(' + (cols - 2) + ')').html(groupLink);
For this:
$(nRow).children('td:eq(' + (cols - 2) + ')').html($compile(groupLink)($scope));
Also, don't forget to inject the $compile
service to your controller.
Edit
This is definitely not the cleanest (or most AngularJS) way to solve the problem, but probably the easiest given the current setup. The best approach would probably be to create a new directive to work with your data tables, but that is beyond the scope of this question.
Edit 2
The general idea is to create a directive to unbind DOM manipulation with your controllers / services.
Have a look at the official AngularJS documentation ( https://docs.angularjs.org/guide/directive ) for how to create a directive. Your goal is probably something that will allow you to get data in the controller through a service and pass that into your directive to work with DOM manipulation. For example, for example:
<my-data-table data="dataVariableInScope"></my-data-table>
source to share