Est-ce qu'un cellRenderer à grille angulaire peut utiliser templateUrl et lui transmettre des paramètres?

Question

En explorant la grille angulaire de http://angulargrid.com je suis resté avec une fonctionnalité sans importance comme avoir des boutons d'action à l'intérieur d'une cellule et le traitement du clic en utilisant un templateUrl et non un modèle HTML inline.

Le cas d'utilisation est trivial: Il y a une grille avec quelques données. Je veux que chaque rangée contienne une cellule avec les actions disponibles (Editer, Supprimer etc).

HTML:

<div ng-if="surveysGirdOptions" ag-grid="surveysGirdOptions" class="ag-fresh" style="height :400px"> 
</div> 

contrôleur AngularJS:

var columnDefs = [ 
    {headerName: "Caption", field: "caption", editable: true}, 
    {headerName: "Questions", field: "questions"}, 
    //{headerName: "Actions", templateUrl: "views/surveys/surveyActions.html"} 
    {headerName: "Actions", cellRenderer: ageCellRendererFunc} 
]; 

function ageCellRendererFunc(params) { 
    return '<span><a class="btn btn-sm btn-primary" ng-click="delete($index)"><span class="glyphicon glyphicon-pencil"></span></a></span><span><a class="btn btn-sm btn-primary" ng-click="delete(' + params.rowIndex + ')"><span class="glyphicon glyphicon-trash"></span></a></span>'; 
} 

fonction ageCellRendererFunc se comporte comme prévu, mais il y a beaucoup de code de modèle dans le contrôleur pour factoriser et de le mettre dans un fichier html.

Mais je n'ai aucune idée comment accéder à params.rowIndex (index de ligne de cette cellule) dans le fichier modèle. Les données de la ligne sont accessibles via la variable de données mais j'ai besoin de l'index de ligne.

Une idée si c'est faisable du tout? Et si possible alors comment?

Il existe des solutions de contournement pour obtenir le même résultat. Mais itérer sur un grand tableau pour savoir quelle ligne doit être éditée, par exemple, sur la base d'un identifiant de données est inefficace par rapport à un accès direct à l'élément row par son index.

Answer 1

Il semble que la ligne soit rendue dans son ensemble, il est donc possible qu'elle utilise quelque chose de similaire à ngRepeat pour ce faire. Une façon de contourner est de créer une directive et d'y attacher la fonction dont vous avez besoin, qui vous fournira l'élément et, à partir de là, vous devriez être en mesure d'obtenir la ligne que vous recherchez.

J'ai utilisé le suivant comme référence: http://angulargrid.com/angular-grid-angular-compiling/index.php

* MISE À JOUR *

Vous pouvez créer votre directive où vous le souhaitez! J'ai tendance à abstraire les directives des contrôleurs car cela permet de garder les choses bien rangées. De la documentation, il semble que la directive est jointe ici:

function countryCellRendererFunc(params) { 
    return '<country name="'+params.value+'"></country>'; 
} 

Vous pouvez créer votre directive autonome comme ceci:

var yourModule = angular.module("yourModule"); 

yourModule.directive('cellRender', function(){ 
    // Whatever you need to do here: 
    return { 
     restrict: 'AE', 
     link: function(scope, elem, attr, ctrl){ 
      // Attach events here... 
     } 
    }  
}); 

// 
// Inject your module into your app... 
var module = angular.module("example", ["angularGrid", "yourModule"]); 

module.controller("exampleCtrl", function($scope, $http) { 

    function countryCellRendererFunc(params) { 
     return '<cell-render name="'+params.value+'"></cell-render>'; 
    } 

});