How to call an area method using the button displayed in ui-grid - in Angular js

Question

I would like to create my own column with a link and call the $ scope method on ng-click. There is a very similar question for ngGrid ( How to call the area method using the button displayed in ngGrid -in Angular js ), and this solution works. I am using a ui grid, which should only be a newer version of ngGrid, but it does not seem to work there.

Here is my code:

var app = angular.module('plunker', ['ui.grid']); app.controller('MainCtrl', function($scope) { $scope.gridOptions = { data: [{name: 'test'}], columnDefs: [{ field:'name', displayName:'name', cellTemplate: '<div ng-click="gridOptions.editUser()">Edit</div>' }], editUser: $scope.editUser }; $scope.editUser = function() { alert('It works!'); }; }); 

http://plnkr.co/edit/Q5SuIeAPFpZaUKbmIDCn

Here is the original solution for ngGrid that works: http://plnkr.co/edit/hgTQ1XdEVRyxscoNs76q

Answer 1

You must declare the outer area that you intend to use in the cell templates using the external-scopes attribute:

 <div ui-grid="gridOptions" class="grid" external-scopes="gridScope"></div> 

Then in the controller you need to define this scope object:

 $scope.gridScope = { editUser: function() { alert('It works!'); } } 

and finally, you will get access to this external area in the template as

 cellTemplate: '<div ng-click="getExternalScopes().editUser()">Edit</div>' 

Demo: http://plnkr.co/edit/saYe6sddbcO76o9qBrNu?p=preview

Answer 2

In the new version of ui-grid, this approach does not work for me. instead, I have an appscope core api application. http://ui-grid.info/docs/#/tutorial/305_appScope