Calling scope method from UI-Grid Cell Button Click

When you try to call a scope method when clicked on a button or link which is in UI-Grid cell, you will get an error saying – it couldn’t find that method. This is because – Grid will have a different scope.
There are a couple of solutions.

  1. Using external scope:
<div ui-grid="gridOptions" class="grid" external-scopes="gridScope"></div>

and defining the functions in that scope (literal) as follows.

$scope.gridScope = {
    deleteRow: function() {
        alert('Now it works!');
<div class="ui-grid-cell-contents"><div ng-click="deleteRow()">Delete</div></div>

2. Using appScope:

<div class="ui-grid-cell-contents"><div ng-click="grid.appScope.editUser()">EDIT</div></div>

You can call the controller $scope method directly by accessing it through appScope.
Happy Coding!

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s