在使用AngularJS中的ui-router时，有时候需要同时激活两个状态（state）来实现复杂的路由结构。本文将介绍如何实现同时激活两个状态，并提供示例代码。
背景
默认情况下，AngularJS中的ui-router只允许一个状态处于激活状态。这意味着当用户进入一个新的状态时，之前的状态会自动退出激活状态。
但是，在某些情况下需要两个或多个状态同时处于激活状态。例如，当应用程序需要显示一个弹出框覆盖当前状态时。
解决方案
要实现同时激活两个状态，我们可以使用ui-router提供的“命名视图”（named views）功能。通过使用命名视图，我们可以将多个子视图并排放置在同一个父级视图中，从而实现多个状态并行激活的目的。
步骤 1：定义父级状态
首先，我们需要定义一个父级状态（parent state），它将包含所有需要同时激活的子状态。以下是一个简单的示例：
-- -------------------- ---- -------
--------------
---------------- -
---- ----------
--------- ----- --------------------------- -------------------------
--
----------------------- -
---- ----------
------ -
--------- -
--------- ---------- -------
-
-
--
----------------------- -
---- ----------
------ -
--------- -
--------- ---------- -------
-
-
---在这个示例中，我们定义了一个名为“parent”的父级状态，并在其模板中包含两个命名视图：“child1”和“child2”。然后，我们定义了两个子状态：“parent.child1”和“parent.child2”，它们分别渲染到父级状态的“child1”和“child2”命名视图中。
步骤 2：激活多个状态
要同时激活父级状态和一个或多个子状态，我们需要使用ui-sref-active指令。该指令允许我们将一个CSS类应用于元素，当与指定的状态匹配时，该类将处于激活状态。
以下是一个示例：
<a ui-sref="parent" ui-sref-active="active">Parent</a> <a ui-sref="parent.child1" ui-sref-active="active">Child 1</a> <a ui-sref="parent.child2" ui-sref-active="active">Child 2</a>
在这个示例中，我们使用ui-sref-active指令将一个名为“active”的CSS类应用到元素（这里是链接标签）。这些链接分别对应于父级状态和两个子状态。当与这些状态之一匹配时，链接将处于激活状态，并显示为具有“active”CSS类的样式。
步骤 3：处理默认状态
可能会遇到这种情况：需要同时激活一个或多个状态，但在初始加载时没有任何状态处于激活状态。为了解决这个问题，我们可以定义一个默认状态，它将在路由启动时自动激活。
以下是一个示例：
$urlRouterProvider.otherwise('/parent/child1');在这个示例中，我们使用$urlRouterProvider.otherwise方法定义了一个默认状态：“/parent/child1”。这意味着如果没有其他状态匹配当前URL时，ui-router将自动激活此状态。
示例代码
完整的示例代码如下：
angular.module('myApp', ['ui.router'])
.config(function
> 来源：[JavaScript中文网](https://www.javascriptcn.com/post/30224) ，转载请注明来源
[https://www.javascriptcn.com/post/30224](https://www.javascriptcn.com/post/30224)