2

I'm trying to display an element based on a scope variable. I can't seem to get it to work. Since $scope.hi exists I'd like the word "Active" to show up. Here is my code: 

var app = angular.module('app', ['ngTouch', 'ui.grid']);

app.controller('MainCtrl', function ($scope, $timeout) {
  $scope.hi = true;
  $scope.gridOpts = {        
        columnDefs: [
          { name:'name', field: 'name' },
          { name:'isActive', field: 'isActive'},
          { name:'template',cellTemplate:'<div><a ng-show="hi">Active</a><a ng-hide={{row.entity.isActive=="N"}}>Deactive</a></div>'}
        ]
  };

  $scope.waiting = "Waiting...";
  $timeout(function () {
    $scope.gridOpts.data = [{ name: 'Bob' ,isActive:'Y'}];
  }, 3000)
  .then(function() {
    $timeout( function() {
      $scope.gridOpts.data = [{ name: 'John',isActive:'N' }];
    }, 3000);
    $scope.waiting = "Waiting again...";
  })
});

http://plnkr.co/edit/eLFjp8qJCtBRLTrQ7GE5?p=preview

KingKongFrog
  • 13,946
  • 21
  • 75
  • 124
  • possible duplicate of [How to access scope from ui-grid cell template?](http://stackoverflow.com/questions/28127207/how-to-access-scope-from-ui-grid-cell-template) – doldt Jul 07 '15 at 19:53

1 Answers1

2

ui-grid creates its grids with an isolate scope, meaning the scope behind that template is not the one you define the template in.

That isolated scope, however, contains a reference to this original scope, which you can access as grid.appScope.

If you change hi to grid.appScope.hi, your example works. Forked version here.

See the ui-grid API docs on appScope:

appScope: reference to the application scope (the parent scope of the ui-grid element). Assigned in ui-grid controller

use gridOptions.appScopeProvider to override the default assignment of $scope.$parent with any reference

doldt
  • 4,466
  • 3
  • 21
  • 36