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

Question

Here is a plunker as requested- http://plnkr.co/edit/tIkBFO?p=preview

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- https://github.com/angular-ui/ui-grid/issues/4116

https://github.com/angular-ui/ui-grid/issues/4886

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) {
                    console.log(uid);

                };

Here is the HTML-

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

Sorry took me a while to get it working- plnkr.co/edit/tIkBFO?p=preview — apaul
Looks like you're doing it correctly with the cellTemplate. Is there a reason you don't want to use it? That's kind of what it is for... If you don't like your HTML in your js, you can use an external file just as easily... — panzhuli
I show users different options between view, and delete depending on what role they have. Just thought it would be easier to not be doing it in the template. I guess drop the filter, add a conditional around what the cell template will be. — apaul

shailendra singh shailendra singh · Accepted Answer · 2020-04-23T11:10:56

This is enough to bind the html containing string

{ field: 'message', displayName : 'Message Description', cellTemplate: '<div ng-bind-html="COL_FIELD"></div>' }

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

2 Answers