41

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".

John Slegers
  • 45,213
  • 22
  • 199
  • 169
tenfour
  • 36,141
  • 15
  • 83
  • 142

1 Answers1

70

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>'
tenfour
  • 36,141
  • 15
  • 83
  • 142
  • 2
    from filterHeaderTemplate I had to use 'col.grid.appScope..myFunction()' – user2171669 Nov 20 '15 at 16:13
  • What is exactly? In according to the example above? –  Dec 17 '15 at 22:20
  • 1
    I can't be sure but the comment with 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 – FOR Jan 12 '16 at 17:58
  • 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 – Saurabh Tiwari Sep 28 '16 at 16:40