I would like to create a custom column with a link and call $scope method on ng-click. There is very similar question for ngGrid (How to call a scope method from a button displayed in ngGrid -in Angular js) and that solution works. I'm using the ui-grid, which is supposed to be just a newer version of ngGrid, but it doesn't 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!');
  };
});

Here is the original solution for ngGrid that works:

I would like to create a custom column with a link and call $scope method on ng-click. There is very similar question for ngGrid (How to call a scope method from a button displayed in ngGrid -in Angular js) and that solution works. I'm using the ui-grid, which is supposed to be just a newer version of ngGrid, but it doesn't 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

• javascript
• angularjs
• angular-ui-grid

2 Answers 2

In new version of ui-grid this approach does not work for me. instead i have use appScope core api. http://ui-grid.info/docs/#/tutorial/305_appScope

You should declare external scope that you are going to use in cell templates using external-scopes attribute:

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

Then in controller you need to define this scope object:

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

and finally you access this external scope in template as

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

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