0

I have the following columnDefs for my angularjs ui grid :

ctrl.temporaryRegGridOptions.columnDefs = [ {
            field: 'firstName',
            'displayName': 'First / Company Name',
            cellTemplate: '<span ng-click="ctrl.grid.appScope.gotoRequiredState()">{{row.entity.firstName}} </span> '
        }, {
            field: 'lastName',
            'displayName': 'Surname',
            width: '150'
        } ]

and I have

ctrl.gotoRequiredState = function() {
        alert("next State");
    }

All I need to do is, on ng-click of a cell I need to call a function.Similar to ClicMe at http://ui-grid.info/docs/#/tutorial/305_appScope. On the official website this feature is given with $scope but in my controller, I am using var ctrl = this; syntax. May be that is the reason even if I have given ng-click="grid.appScope.gotoRequiredState()">, the gotoRequiredState() function is not getting called. So I have changed it to ng-click="ctrl.grid.appScope.gotoRequiredState()"> but still no luck. Even after I click firstName cell, the gotoRequiredState() function is not getting called. Can any one help me to fix this.

Madasu K
  • 1,813
  • 2
  • 38
  • 72

2 Answers2

1

The following has solved the problem :

ctrl.temporaryRegGridOptions.appScopeProvider = ctrl;

with 

cellTemplate: '<span ng-click="grid.appScope.gotoRequiredState()">{{row.entity.firstName}} </span> '

works fine.

otherwise simply using :

 cellTemplate: '<span ng-click="grid.appScope.$parent.$ctrl.gotoRequiredState()">{{row.entity.firstName}} </span> '

works fine without assigning ctrl to appScopeProvider. By the way I am using Angularjs 1.5 + components architecture.

Madasu K
  • 1,813
  • 2
  • 38
  • 72
0

From the documentation that you have shared, I presume that appScope is the parent scope of the grid directive.

If thats the case, could you try

ng-click="grid.appScope.ctrl.gotoRequiredState()" ?

Muthukannan Kanniappan
  • 2,080
  • 1
  • 16
  • 18