如何在ui-grid中使用$scope变量显示

How to use ng-show in ui-grid within celltemplate using $scope variable

本文关键字:scope 变量 显示 ui-grid      更新时间:2023-09-26

我试图显示一个基于作用域变量的元素。我似乎不能使它工作。因为美元范围。我希望出现"活跃"这个词。下面是我的代码:

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 =预览

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

但是,这个隔离的作用域包含对这个原始作用域的引用,您可以作为grid.appScope访问它。

如果您将hi更改为grid.appScope.hi,则示例有效。这里是分叉版本

参见ui-grid API文档:appScope:

appScope:引用应用程序作用域(ui-grid元素的父作用域)。在ui-grid控制器中分配

gridOptions使用。appScopeProvider来覆盖$scope的默认赋值。$parent有任何引用