apaul apaul - 1 year ago 235
AngularJS Question

Angular UI Grid: How to bind HTML with the cellTemplate, AND dynamically build HTML that ng-click works on

Here is a plunker as requested-

I am using the controllerAs pattern. I have been using the cell template with a filter($sce) to sanitize, and then build HTML. For the life of me, I cannot get the ng-click to register to my controller.

I can change the cell template to cellTemplate:

'<button ng-click="grid.appScope.user.delete(\'works!\')">X</button>'
-> This works.

Is there anyway to NOT use cell template and still get to the controller? Details column is where I am having issues.

Thanks for reading!

Related issues-


Here is the code-

var user = this;

user.gridDefs = [{
displayName: 'User ID',
name: 'userId',
width: "10%"
}, {
name: 'firstName',
width: "15%"
}, {
name: 'lastName',
width: "15%"
}, {
name: 'email',
cellTemplate: '<div ng-bind-html="COL_FIELD |trustedclean"></div>',
width: "25%"
}, {
name: 'username',
width: "15%"
}, {
name: 'details',
cellTemplate:'<div ng-bind-html="COL_FIELD |trustedclean"></div>'
width: "20%"
}, ];

user.gridData = _.map(dataFromSvc.users, function(user) {
var buildDetailsString = buildDetails(user.uid);
var object = {
'userId': user.Id,
'firstName': user.firstName,
'lastName': user.lastName,
'email': '<a href=\"mailto:' + user.primaryEmail + '\">' + user.primaryEmail + '</a>',
'username': user.uid,
'details': '<div><a href=\"#/viewuser/'+user.uid+'/true\">View</a>/<a ng-click=\"user.deleteUser('+user.uid+')\">Delete</a></div>'
return object;

user.deleteUser = function(uid) {


Here is the HTML-

<div id="grid2" ui-grid="{ data: user.gridData, columnDefs:user.gridDefs}" class="grid"></div>

Answer Source

Answering my own question-

Do not sanitize, and use ng-bind on ui-grid. Use the template to manage your cells. This is what I did.