Can't access ui-grid in cellTemplate

Question

I am trying to create a column with different formatting within my ui-grid within the angular framework.

columnDefs: [{
                    name: 'Column', width: 300, visible: true, cellTemplate: '<a href="modelremote:{{ grid.getCellValue(row, col) }}">{{ grid.getCellValue(row, col) }}</a>'
                }]

However, when the code is run I get the following error

jinja2.exceptions.UndefinedError: 'grid' is undefined

Answer 1

With hindsight the solution here was obvious as was the problem. The error message points to jinja2 which is the templating engine that I am using to serve my pages.

Both angular and jinja2 use the {{ and }} which is ironic since one assumes they were chosen to precisely avoid this kind of conflict.

Simply escaping the curly braces solves the problem.

   columnDefs: [{
                    name: 'Column', width: 300, visible: true, cellTemplate: '<a href="modelremote:\{\{ grid.getCellValue(row, col) \}\}">\{\{ grid.getCellValue(row, col) \}\}</a>'
                }]