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

问题

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

回答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

回答2:

If you are using Controller-As syntax then try:

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

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

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

来源：https://stackoverflow.com/questions/26744561/ng-click-inside-cell-template-does-not-trigger-function-in-controller