当使用AngularJS结合ui-grid时，我们经常需要在单元格中显示一些自定义内容。为了实现这一点，我们可以使用ui-grid提供的cellTemplate选项来定制单元格的外观和行为。但是，在单元格模板中访问作用域变量可能会有些棘手。在本文中，我们将介绍如何从ui-grid单元格模板中访问作用域，并提供示例代码。
访问作用域
首先，让我们看一下如何访问作用域变量。在AngularJS中，每个控制器都有一个相关联的作用域（scope），它是该控制器及其视图之间的连接点。作用域通过树形结构与其他作用域相关联，形成了作用域层次结构。当我们在一个作用域中设置一个属性时，它将被传递到子作用域中。因此，在单元格模板中，我们可以通过访问父控制器作用域或根作用域来获取所需的变量。
要访问父控制器作用域中的变量，我们可以使用如下语法：
<div>{{parentScope.variableName}}</div>在上面的代码中，parentScope是一个指向父控制器作用域的引用，variableName是我们想要访问的变量名。类似地，要访问根作用域中的变量，我们可以使用如下语法：
<div>{{rootScope.variableName}}</div>在上面的代码中，rootScope是一个指向根作用域的引用。
在ui-grid单元格模板中访问作用域
现在，我们已经了解了如何访问作用域变量，让我们看一下如何在ui-grid单元格模板中使用它们。假设我们有一个控制器，其中包含一个数组data和一个名为selectedItem的属性，该属性跟踪当前选择的项。我们希望在ui-grid单元格中显示数组中每个项的描述，并在用户单击单元格时将该项标记为已选中。
我们可以通过传递一个包含所需信息的对象来定义cellTemplate选项。对于上面的示例，我们可以这样定义cellTemplate：
-- -------------------- ---- -------
------------------ - -
----------- -
-
------ --------------
------------ --------------
------------- ----- ----------------------------------------------- ------------------------ ------------------------------------------------------------------------
-
-
--在上面的代码中，我们定义了一个名为cellTemplate的属性，该属性是一个包含HTML字符串和AngularJS表达式的字符串。在这个字符串中，我们使用了ng-click指令来调用一个名为selectItem的函数，该函数将当前行实体作为参数传递。我们还使用了ng-class指令来设置选中样式。最后，我们在单元格中使用了{{row.entity.description}}表达式来显示所需的描述。
现在，让我们看一下如何在控制器中实现selectItem和isSelected函数：
-- -------------------- ---- ------- ------------------- - ----- ----------------- - -------------- - ------------------- - ----- -- ----------------- - -------------- - ------ ------------------- --- ----- --
在上面的代码中，我们定义了一个名为selectedItem的属性，它初始化为null，表示没有选择任何项。我们还定义了名为selectItem和isSelected的函数。selectItem函数接受一个参数item，并将其分配给selectedItem属性
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/26283