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;
    }
});

Autonomic

use externalScopes. See my answer here:#26622098 – Highgrade

@Highgrade What has this to do with externalScopes? There is no external scope. The ng-click sample on the tut side from ui-grid is doing the same thing just like me without external scope. Hm... thats odd I could swear I have seen this ng-click in a cellTemplate working on a plunker, but ui-grid says:"UI-Grid uses isolate scope, so there is no access to your application scope variables from a row or cell template." OK then I need an external scope!!! Thanks buddy! – Autonomic

At the moment the versions, tutorials and manuals of ui-grid are a bloody mess. I also think it worked without external scopes a short while ago. Hope this gets out of beta soon. Btw: Impressive Plunker you have built there! – Highgrade

have fun with the plunker, the real app is more advanced ;-) – Autonomic

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

Whaler

The accepted answer in #26622098 is no longer valid, see Marcus's answer, it's ng-click="grid.appScope.myfunction()" or ng-click="grid.appScope.myfunction(row.entity.cellfield)" – Carbon

Answer 2

If you are using Controller-As syntax then try:

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

Vantage

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>" 

Lovely

Using appScopeProvider is what worked for me, for some reason specifying grid.appScope.vm.myFunction() didn't work within the cell template for me. Using appScopeProvider and passing it my 'vm' variable (which was set to 'this' in my controller and contained myFunction) I just had to do grid.appScope.myFunction() and it worked. – Berth

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>'

Delao