J'ai créé un plongeur ici: http://plnkr.co/edit/zGqouwzxguef13lx48iP?p=preview
Lorsque je clique dans une cellule de la grille ui dans la vue quotidienne, rien ne se passe. Ce à quoi je m'attendais, c'est que la fonction de test soit exécutée et qu'une alerte s'affiche avec le texte «test», mais ce n'est pas le cas.
Qu'est-ce qui ne va pas ici?
Thats le template de cellule html de la dernière version de ui-grid 3.0:
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>
MANETTE:
'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;
}
});
Cette page revenait sans cesse dans mes recherches et j'ai réussi à rater la solution dans les commentaires. Pour résumer, vous devrez probablement utiliser externalScopes. Voir Angular Les événements ui-grid dans l'en-tête de cellule ne se déclenchent pas et http://ui-grid.info/docs/#/tutorial/305_appScope
Si vous utilisez Controller-As syntax, essayez:
ng-click= "grid.appScope.<controllerAliasName>.myFunction(row)"
Dans ui-grid, cell-template, car la cellule a sa propre portée,
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>'
C'est parce que l'interface utilisateur a son propre contrôleur et qu'elle ne connaît pas le contrôleur externe.
Pour faciliter, procédez comme suit ... 1. Attribuez d’abord le contrôleur à la grille ui.
var vm = this;
this.$scope.usersGridOptions = {
appScopeProvider: vm,
....
}
Maintenant, une fois que vous affectez le contrôleur à la grille, vous pouvez appeler la fonction comme ceci.
"<a type=\"button\" href=\"\" ng-click=\"function(row.entity)\"> {{ row.entity.text}} </a>"