Angular UI Grid, adding a button to a row cell via templating

Question

I got the following gridOptions.columnDefs

 $scope.generateReport = function(row) {
     alert("Test");
 };

 $scope.gridOptions.columnDefs = [
     { name: 'Action', 
       cellEditableCondition: false, 
       cellTemplate: '<button ng-click="grid.appScope.generateReport(row)"> 
                       Report 
                      </button>' 
     }];

It's not working, the button shows but once clicked its not calling the function. I'm following their guide Here, and I'm using ui-grid - v3.0.0-RC.18.

I got the following for my html.

        <div id="grid1"
             ui-grid="gridOptions"
             ui-grid-cellnav
             ui-grid-edit
             ui-grid-expandable
             ui-grid-exporter
             class="myGrid">
        </div>

I also tried to add an external-scope but didn't make a difference..

Any ideas?

Answer 1

My ng-click for a button in a ui-grid row looks like this.

ng-click="getExternalScopes().delete($event, row)

My controller has $scope injected and the first line creates the reference (I believe) to the external scope.

app.controller("MyController", function ($scope) {
$scope.$scope = $scope;

The HTML looks like this, which refers to the external scope.

<div ui-grid="gridOptions" class="someClass" external-scopes="$scope" ui-grid-selection ui-grid-resize-columns></div>

Here is my entire cellTemplate if it helps...

<div class="ui-grid-cell-contents ng-binding ng-scope"><button class="btn btn-danger {{getExternalScopes().deleteButtonClass(row)}} btn-xs btn-block" ng-click="getExternalScopes().delete($event, row)"><span class="glyphicon glyphicon-trash"></span></button></div>