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".
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>'
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With