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

tenfour · Accepted Answer · 2016-09-25 11:58:22Z

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

edited Sep 25, 2016 at 11:58

answered Jan 24, 2015 at 16:18

tenfour

37k15 gold badges89 silver badges147 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user2171669 Over a year ago

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

user2227400 Over a year ago

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

FOR Over a year ago

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

Saurabh Tiwari Over a year ago

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

Collectives™ on Stack Overflow

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

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related