Invoking a function inside controller from ng-click in ng-grid is not working

Question

I got stuck while calling a function inside controller(listCtrl) from ng-click inside ng-grid

asset.js.coffee

app = angular.module('asset',[]).namespace(true)
            app.controller 'linkCtrl', ['$scope','Restangular','asset.ProcServiceTools',($scope,Restangular,ProcServiceTools) ->  
              Restangular.all('asset').customGETLIST("linktogroup",{}).then (data) ->
                $scope.myData = data
                $scope.dynamicColumnDefs =ProcServiceTools.getIndexDynamicColumnDefs(data)
              $scope.customoptions = ProcServiceTools.getCustomOptions()
              $scope.linking = () ->
                console.log("checkout")
            ]
            app.service 'ProcServiceTools', () ->
              class Tools
                getIndexDynamicColumnDefs: (data) ->
                  return [
                    {field: 'id', displayName: 'ID' },
                    {field: 'asset_group_id', displayName: 'Group_ID' },
                    {field:'asset_catalog_id', displayName:'Catalog_id' },
                    {field: 'condition', displayName: 'Condition' },
                    {field: 'notes', displayName: 'Notes' },
                    {field: 'status', displayName: 'Status' },
                    {field: 'current_user_id', displayName: 'Current_user' },
                    {field: '' , cellTemplate: "<button  ng-click='linking()'>Link-to </button>"}]
                getCustomOptions: () ->
                  return {
                    showGroupPanel: true
                    jqueryUIDraggable: true
                    showSelectionCheckbox: true
                    showFooter: true
                    selectWithCheckboxOnly: true
                    enableColumnResize: true
                  }
              new Tools

This is my asset.js file...I have injected the ProcServiceTools inside my linkCtrl and called the getIndexDynamicColumnDefs function inside this service with data as paramter and it get assigned to $scope.myData and i have also added linking() to the $scope

And this is my

index.html.erb

<div ng-controller='asset.linkCtrl'>
<customgrid columndefs='dynamicColumnDefs' data='myData' dirclass='gridStyleTable' include-search='true' options='customoptions'></customgrid>

In this file i set the data to be myData.I am getting all the datas displayed and button is also getting displayed..My problem is ng-click in the getIndexDynamicCoulmnDefs is not getting triggered when i click the link-to button...

But when i insert a button inside index.html.erb it is triggering the function.See the below code.The inserted button link is triggering the linking().

                <div ng-controller='asset.linkCtrl'>
                <customgrid columndefs='dynamicColumnDefs' data='myData' dirclass='gridStyleTable' include-search='true' options='customoptions'></customgrid>
            <button ng-click="linking()">link</button>
            </div>

I dont know the reason why i cant call the function inside the controller from ng-clik in ng-grid.

You might be have the same problem I had, ng-grid reportedly introduces a new scope in the hierarchy, so you need to call into $scope.$parent, see http://stackoverflow.com/questions/26744561/ng-click-inside-cell-template-does-not-trigger-function-in-controller/28794399#28794399 — Fasermaler, Mar 11 '15 at 18:45
@prasanthv not really, it's just how ui grid works. I managed to confuse myself now though, so thanks for the heads-up. I think it should be grid.appscope... silly scopes :) check http://ui-grid.info/docs/#/tutorial/305_appScope — Fasermaler, Mar 11 '15 at 21:43
@prasanthv,Fasermaler Thanks for ur solutions..I got it working..It didnt get triggered because of my mistake which i have posted in my solution !!!! — Naveenam K, Mar 12 '15 at 06:07

score 0 · Answer 1 · answered Mar 12 '15 at 06:14

The problem is because of my user defined customgrid directive which i have included in index.html.erb that has its own private scope..So i used ng-grid itself and got that function triggered...

app = angular.module('asset', []).namespace(true);
            app.controller('linkCtrl', ['$scope', 'Restangular', function($scope, Restangular) {
                $scope.linking = function() {
                   console.log("check me out");
                };
                 Restangular.all('asset').customGETLIST("linktogroup", {}).then(function(data) {
                  $scope.myData = data;
                });
                    $scope.gridOptions = { 
                                data: 'myData',
                           columnDefs: [{field: 'id', displayName: 'ID' },
                                                {field: 'asset_group_id', displayName: 'Group_ID' },
                                                {field:'asset_catalog_id', displayName:'Catalog_id' },
                                                {field: 'condition', displayName: 'Condition' },
                                                {field: 'notes', displayName: 'Notes' },
                                                {field: 'status', displayName: 'Status' },
                                                {field: 'current_user_id', displayName: 'Current_user' },
                                                    {cellTemplate:'<button id="editBtn" type="button" class="btn btn-primary" ng-click="linking()" >Edit</button> '}]};

              }
            ]);

And my index.html.erb

    <div ng-controller='asset.linkCtrl'>
    <div class="gridStyle" ng-grid="gridOptions"></div>
    </div>

And got my thing working :)

Invoking a function inside controller from ng-click in ng-grid is not working

1 Answers1