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

Question

How does one access $scope 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: http://plnkr.co/edit/WYXeQShHWKDYDs4MIZnP?p=preview

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

Aurelia

Answer 1

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

Aurelia

from filterHeaderTemplate I had to use 'col.grid.appScope.<ctrl alias>.myFunction()' – Sigurd

What is <ctrl alias> exactly? In according to the example above? – Teeming

I can't be sure but the comment with <ctrl alias> seem to make sense for those using the "Controller as" syntax. So, if you've set up your controller to be available as an alias (commonly: controller as vm), then you need to include the alias in your chain, eg: grid.appScope.vm.myMethod(). HTH – Barbey

I tried this ng-change="grid.appScope.checkValidaton($event,MODEL_COL_FIELD,true,true). The scope function gets called however the arguments are undefined. How can I pass the $event and ng-model along – Savil