How to call a scope method from a button displayed in ui-grid - in Angular js

Question

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

Himen · Accepted Answer · 2015-05-17 07:12:46Z

4

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

answered May 17, 2015 at 7:12

Himen

1,45012 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

hugsbrugs Over a year ago

yes, juste have to put in your template : ng-click="grid.appScope.your_function(row.entity.your_variable)

dfsq · Accepted Answer · 2014-12-23 22:33:31Z

3

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

answered Dec 23, 2014 at 22:33

dfsq

193k26 gold badges244 silver badges261 bronze badges

1 Comment

Victor Ionescu Over a year ago

this doesn't work anymore. See the answer from Himen

Collectives™ on Stack Overflow

How to call a scope method from a button displayed in ui-grid - in Angular js

2 Answers 2

1 Comment

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

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

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

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related