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

Question

angular.module('harbinger').controller(
   'Admin.UserlistController',  
   function($rootScope, $scope, $location, $http, userService)
   {
      // etc
      $scope.gridOptions = {
         // etc ,
         enableRowSelection: false,
         columnDefs: [
            {field: 'userName', displayName: 'Username'},
            {field: 'name', displayName: 'Name'},
            {field: 'organization', displayName: 'Organization'},
            {field: 'title', displayName: 'Title'},
            {field: 'dateOfBirth', displayName: 'Date Of Birth'},   
            {field: 'controls', displayName: '', cellTemplate: '<div id="controls" ><a id="user-edit" onClick="editUser(\'{{row.entity.userName}}\')">Edit</a> | <a id="user-reset" data-ng-click="resetUser(\'{{row.entity.userName}}\')">Reset</a> | <a id="user-unlock">Un-lock</a></div>'}
         ]
      };

onclick of user reset i have to pass the

userService.reset($scope.userData, function( data ) // success
                {
                   // etc
                }

i am using ngGrid, and i am trying to call a scope method from a button displayed in ngGrid. –

on click i am not able to execute this function . Please give me angular js way to do this .

@DadoJerry : its not showing any error,on page load it will work — Prashobh
– Prashobh, Commented Jun 28, 2013 at 10:03
@Kersten <div class="gridStyle" ng-grid="gridOptions" style="display:none"></div> — Prashobh
– Prashobh, Commented Jun 28, 2013 at 10:04
supposed to see the html that your are triggering ng-click() — Dhaval Marthak
– Dhaval Marthak, Commented Jun 28, 2013 at 10:04

Xeon · Accepted Answer · 2014-05-16 15:27:55Z

4

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:

$parent.editUser('')
<div ng-controller="AppCtrl as ctrl"><div ng-grid="options"></div></div> and ctrl.editUser('')
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

edited May 16, 2014 at 15:27

answered May 16, 2014 at 15:10

Xeon

6,0195 gold badges34 silver badges52 bronze badges

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

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related