How To Call A Scope Method From A Button Displayed In NgGrid -in Angular Js

angular.module('harbinger').controller( 'Admin.UserlistController', function($rootScope, $scope, $location, $http, userService) { // etc $scope.gridOptions =

Solution 1:

Maybe it's an old question but I'll answer it.

ngGrid creates an isolated scope so there is no way of getting to your parent scope via something like this:

1. $parent.editUser('')
2. <div ng-controller="AppCtrl as ctrl"><div ng-grid="options"></div></div> and ctrl.editUser('')
3. by using . ($scope.callback = {}; $scope.callback.editUser = function(){}; -> callback.editUser(''))

ngGrid uses your options in the isolated scope, which is available to your cell/rowTemplates - so you can do as follows:

Javascript Controller:

$scope.editUser = function(userName) {
    ...
};

$scope.options = {
    data: 'data',
    columnDefs: [{
        field:'name', 
        displayName:'name', 
        cellTemplate: '<div ng-click="options.editUser(\'{{row.entity.userName}}\')">Edit</div>'
    }],
    editUser: $scope.editUser
}

HTML:

<div ng-grid="options"></div>

Plunker: Test app