tenfour tenfour - 11 months ago 88
Javascript Question

AngularJS : How to access scope from ui-grid cell template?

How does one access

from a ui-grid cell template? Here's my controller code:

app.controller('MainCtrl', ['$scope', function ($scope) {

// i want to reference this from a cell template.
$scope.world = function() { return 'world'; };

$scope.gridOptions = {
data: [
{ id: "item1" },
{ id: "item2" }
columnDefs: [
field: 'id',

// world() is never called and is not displayed.
cellTemplate: '<div>{{ "hello " + world() }}</div>'

See it in action here:

I would expect cell contents to show "hello world", but they just show "hello".

Answer Source

According to http://ui-grid.info/docs/#/tutorial/305_appScope, the grid has its own isaloted scope, so you need to use grid.appScope to access your application scope. The solution is to change the cell template to:

  cellTemplate: '<div>{{ "hello " + grid.appScope.world() }}</div>'