javascript - 如何使用 $scope 变量在 celltemplate 中的 ui-grid 中使用 ng-show

Question

我正在尝试显示基于范围变量的元素。我似乎无法让它工作。由于 $scope.hi 存在，我希望显示“Active”一词。这是我的代码:

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

Answer 1

ui-grid 使用隔离范围创建其网格，这意味着该模板背后的范围不是您在其中定义模板的范围。

然而，该独立作用域包含对该原始作用域的引用，您可以将其作为 grid.appScope 进行访问。

如果将 hi 更改为 grid.appScope.hi，则您的示例有效。 Forked version here.

参见 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