Calling scope method from UI-Grid Cell Button Click

Problem:

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.

Solution:

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

Your email address will not be published. Required fields are marked *