Can an angular-grid cellRenderer somehow use templateUrl and pass parameters to it?

Question

While exploring the angular grid from http://angulargrid.com I got stuck with an unimportant feature like having action buttons inside a cell and processing the click using a templateUrl and not an inline HTML template.

The use case is trivial: There's a grid with some data. I want that each row contains one cell with available actions (Edit, Delete etc).

HTML:

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

AngularJS controller:

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

ageCellRendererFunc function behaves as expected, though there's a lot of template code in controller to refactor out and put into an html file.

But I have no clue how to access params.rowIndex (this cell's row index) in the template file. The data of the row is accessible through the data variable but I need the row index.

Any idea if it is feasible at all? And if feasible then how?

There are workarounds to achieve the same result. But iterating over a big array to find out which row should be edited, for example, based on some id from data is inefficient compared to having direct access to the row element by its index.

Answer 1

It looks as though the row is rendered as a whole, so it might be using something similar to ngRepeat in order to do this. One way around it is to create a directive and attach the function you need inside which will provide you the element and from there, you should be able to get the row you're after.

I used the following as a reference: http://angulargrid.com/angular-grid-angular-compiling/index.php

* UPDATE *

You can create your directive wherever you like! I tend to abstract directives away from controllers as it keeps things nice and tidy. From the docs, it looks as though the directive is attached here:

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

You can create your stand alone directive like so:

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

});