ng-click inside cell template does not trigger function in controller

Question

I have created a plunker here: http://plnkr.co/edit/zGqouwzxguef13lx48iP?p=preview

When I click in a cell of the ui-grid in the day view then nothing happens. What I expected is that the test function is executed and an alert is shown with text 'test' but that is not the case.

What is going on wrong here?

Thats the html cell template of the ui-grid 3.0 latest release:

HTML

<div ng-click="test()" ng-switch="row.entity[row.grid.columns.indexOf(col)].isPeriod">

    <div ng-switch-when="true">
        <tabset>
            <tab>
                <tab-heading>
                    <i class="glyphicon glyphicon-book"></i>
                </tab-heading>period id:
                {{ row.entity[row.grid.columns.indexOf(col)].id}}
            </tab>
            <tab select="alertMe()">
                <tab-heading>
                    <i class="glyphicon glyphicon-bell"></i>
                </tab-heading>
                {{row.entity[row.grid.columns.indexOf(col)].content}}
            </tab>

        </tabset>      <!-- PeriodTemplate -->
    </div>
    <div ng-switch-when="false">
       <div>Hello empty template</div>
    </div>      <!-- EmptyPeriodTemplate -->
</div>

CONTROLLER:

'use strict';
angular.module('projectplanner').controller('DateplannerDayController', function ($scope, $state) {


    var columnHeaderDates = ['col1','col2','col3','col4','col5','col6','col7']
    $scope.columns = createColumnHeaders(columnHeaderDates);

var data = [{isPeriod: true, id: 10, rowNumber: 1},{isPeriod: false, id: 11, rowNumber: 2}]

  $scope.test = function()
  {
    alert('test');
  };

    $scope.gridOptions = {
        rowHeight: 200,
        data: data,
        enableSorting: false,
        enableColumnMenu: false,
        columnDefs: $scope.columns,
        onRegisterApi: function (gridApi) {
            $scope.gridApi = gridApi;
            $scope.gridApi.core.addRowHeaderColumn(
                { name: 'rowHeaderCol',
                    displayName: '',
                    width: 100,
                    cellTemplate: '<div>row header template</div>'
                });
        }
    };

    function createColumnHeaders(columnHeaders) {
        var columnDefinitions = [];
        for (var i = 0; i < columnHeaders.length; i++) {
            var column = {
                name: columnHeaders[i],
                cellTemplate: 'lessonplanner.day.celltemplate.html',
                field: i + 'x'
            }
            columnDefinitions.push(column);
        }
        return columnDefinitions;
    }
});

Answer 1

This page kept popping up in my searches and I managed to miss the solution in the comments. To summarize, you likely need to use externalScopes. See Angular ui-grid events in cell header not firing and http://ui-grid.info/docs/#/tutorial/305_appScope

Answer 2

If you are using Controller-As syntax then try:

ng-click= "grid.appScope.<controllerAliasName>.myFunction(row)"

Answer 3

It is because the ui-grid has its own controller and it doesn't know about the outside controller.

To facilitate, do the following.. 1. First assign the controller to the ui-grid.

var vm = this;
this.$scope.usersGridOptions = {
 appScopeProvider: vm,
 ....
}

Now, once you assign the controller to the grid, you can invoke the function like this..

"<a type=\"button\"  href=\"\" ng-click=\"function(row.entity)\"> {{ row.entity.text}} </a>" 

Answer 4

In ui-grid, cell-template, because of cell has its own scope,

1) do not use onclick='', instead should use ng-click=''

2) ng-click='your_function()' will not work, should use, grid.appScope.your_function()

3) when pass parameter in function(), do not use function({{xxx}}), see sample below

cellTemplate: '<div class="ui-grid-cell-contents" title="TOOLTIP"><a href=""  ng-click="grid.appScope.watering_modal(grid.appScope.editLink_tree_id(grid, row),grid.appScope.editLink_site_no(grid, row),grid.appScope.editLink_crm(grid, row), grid.appScope.editLink_package_no(grid, row) )">{{grid.appScope.editLink_tree_id(grid, row)}}</a></div>'