Cell Template ng-click action never fires

Question

I have a dynamically-driven ng-click call inside a cellTemplate call that should fire a function call to open a previously defined Ionic modal, but when I run the click event on entries in the datagrid, the associated scope function call never fires.

I'm not clear if the issue is caused by scope range, or the mechanism of building the function call problematically. Any ideas as to what the cause could be?

//Generator for edit links in the grid cell
$scope.makeEditButtons = function (gridName) {
    return "<i class='icon ion-gear-a' ng-click='openEdit" + gridName + "Modal(row.entity)' title='Edit' style='cursor:pointer;'></i>&nbsp;&nbsp;<i class='icon ion-alert' ng-click='openDelete" + gridName + "Modal(row.entity)' title='Delete' style='cursor:pointer;'></i>";
};

//Cell declarations for grid for "Custom Costs"
$scope.custom_costs_columns = [
    {field: "description", displayName: "Description", width: '35%'},
    {field: 'cost', displayName: "Cost", width: '35%', cellClass: 'text-right', cellFilter: 'currency'},
    {field: 'edit', displayName: "Actions", cellTemplate: $scope.makeEditButtons("CustomCost"), cellClass: 'text-center'} 
];

// UI-Grid initalize
$scope.CustomCostOptions = {
    enableSorting: true,
    columnDefs: $scope.custom_costs_columns,
    enableCellSelection: true,
    enableRowSelection: false,
    enableCellEdit: false,
    onRegisterApi: function (gridApi) {
        $scope.gridApi = gridApi;
    }
};

//Ionic Modal declare and click function
$scope.deleteCustomCostModal = $ionicModal.fromTemplate({{Template}}, function ($ionicModal) {
    $scope.modal = $ionicModal;
},
    {
        scope: $scope,
        focusFirstInput: true
    });
$scope.openDeleteCustomCostModal = function (row) {
    console.debug(row);
    $scope.deleteCustomCostModal.show();
};

Do accept an answer if anyone of them helped you. – Dinesh Devkota Sep 08 '16 at 21:38 — Dinesh Devkota, Sep 08 '16 at 21:38

score 0 · Answer 1 · answered Aug 23 '16 at 20:32

One possible issue with not being able to click the created button is because the $scope has not recieved the compiled elemt yet.

Modify the function to

$scope.makeEditButtons = function (gridName) {
    return $compile("<i class='icon ion-gear-a' ng-click='openEdit" + gridName + "Modal(row.entity)' title='Edit' style='cursor:pointer;'></i>&nbsp;&nbsp;<i class='icon ion-alert' ng-click='openDelete" + gridName + "Modal(row.entity)' title='Delete' style='cursor:pointer;'></i>")($scope);
};

Use the following function and call it right before the click event.

 $scope.applyToview=function(){     if ($scope.$root.$$phase != '$apply' &&
            $scope.$root.$$phase != '$digest') {
            $scope.$apply();

        }
    }

Good luck.

score 0 · Answer 2 · answered Aug 24 '16 at 03:38

First, you need to declare the function to handle click event in appScopeProvider. Then call it in cellTemplate

Ex:

    vm.gridOptions = {
            columnDefs: [
               {field: 'edit', displayName: "Actions", cellTemplate: '<span ng-click="grid.appScope.clickHandler(row)">Edit</span>'}
            ],
        ................
           appScopeProvider: {
                    clickHandler: onCellClick
                }
        }
      function onCellClick(row){
        console.log(row.entity);
      }

Hope it helps!

score 0 · Answer 3 · answered Aug 25 '16 at 17:41

First, your cellTemplate should be just that. It should look something like this:

  cellTemplate: '<i class="icon ion-gear-a" style="text-decoration:underline; color: blue; cursor:pointer;" ng-click="grid.appScope.openDeleteCustomCostModal(row)">{{COL_FIELD}}</i><i class='icon ion-alert' ng-click="grid.appScope.deleteCostModal(row)" title='Delete' style='cursor:pointer;'></i>'

This will call the two functions you have when clicked.

Cell Template ng-click action never fires

3 Answers3