Angular UI Grid by adding a button to a row cell using templates

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 does not work, the button shows, but once clicked it without calling a function. I follow their guide here , and I use 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 external-scope , but it didn't make any difference.

Any ideas?

Answer 1

My ng-click for the button in the ui-grid line is as follows.

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

The $ scope variable is introduced in my controller, and the first line creates a link (I believe) to the outer scope.

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

HTML looks like it refers to an external area.

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

Here is my whole 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>