Pascal Pascal - 20 days ago 5
AngularJS Question

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

Answer

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