Angularjs 角度ui路由器ng（如果当前精确状态）

管理我的父子状态有困难，主要是因为我是ui路由器的新手。然而，我做过研究，发现了需要硬编码路线但不是动态的解决方案

我目前拥有的：

<div> <!-- parent state -->
    <div ng-if="'.' | isState">
        <!-- 
          background hierarchy that should be visible only when
          parent state is active and not a child state of the parent
        -->
    </div>
    <nav>
        <a ui-sref="." ui-sref-active="active">Parent</a>
        <a ui-sref=".child1" ui-sref-active="active">Child 1</a>
        <a ui-sref=".child2" ui-sref-active="active">Child 2</a>
    </nav>
    <div ui-view></div>
</div>

父母亲
儿童1
儿童2

我想要完成什么？ 加载父对象时，我希望背景显示一些内容。它占据了整个屏幕。

ui视图

不会占据整个屏幕。因此，我希望在路由与父级的状态不完全匹配时隐藏或删除背景元素（如果父级的路由是

/root/parent

，我希望只有在状态完全是

/root/parent

而不是

/root/parent/child1

时背景才可见）

只有当我提供准确的预期路线时，我才能实现我想要的。例如

ng if=“'root.parent'| isState”

此外，当显示子视图时，

ui sref active=“active”

会保留

active

类（这是预期的，但我只希望该类在路径完全匹配时才处于活动状态）

然而，我觉得将父级的路径硬编码到视图中并不好。我只想让它和它所属的路线匹配。因此，如果我以后决定将其移动到

/root/parent/car

，我不必更新

ng if

和

ui sref active

，以反映更改

---

是否有人遇到此问题并能够解决此问题？

根据您的情况使用

$state.current.name

<div ng-if="$state.current.name === 'state1'">

</div>

---

这可以通过几种方式实现，因为您可能有一个独立的

父控制器

如果

控制器：

app.controller('myCtrl', function($scope,$state) {
     if($state.current.name == 'your parentstate')
        {
          $scope.stateName = true;
        }
     else
        {
          $scope.stateName = false;
        }

});

<div ng-if="stateName">
  // this only executes if current stateName is parent state
</div>

查看：

app.controller('myCtrl', function($scope,$state) {
     if($state.current.name == 'your parentstate')
        {
          $scope.stateName = true;
        }
     else
        {
          $scope.stateName = false;
        }

});

<div ng-if="stateName">
  // this only executes if current stateName is parent state
</div>

---

现在，将CSS添加到活动类中，使其仅在父类的后台显示。

感谢您的回复，但我寻求的解决方案中的一个条件是尝试避免硬编码状态。我的解决办法如下：

对于导航链接，我必须阅读ui路由器指令代码，以查找

ui sref active eq

指令，我以以下方式应用该指令：

<nav>
    <a ui-sref="." ui-sref-active-eq="active">Parent</a>
    <a ui-sref=".child1" ui-sref-active="active">Child 1</a>
    <a ui-sref=".child2" ui-sref-active="active">Child 2</a>
</nav>

然后在视图中：

<div ng-if="showBackground">
    <!-- 
      background hierarchy that should be visible only when
      parent state is active and not a child state of the parent
    -->
</div>

---

最简单的解决方案是检查控制器中的状态并执行需要执行的操作

app.controller('appCtrl', function($scope, $state) {
    if ($state.is('my-active-state')) {
        // do stuff when the state is active
    } else {
        // do stuff when the state is NOT active
    }
});

---

查看查看以了解更多信息。

您拥有父子层次结构的原因是什么？从子路由

child 1

中删除

active

类，并将

css

添加到

active

类中，使其仅显示在背景中。@arqam页面的主要内容实际上是作为背景显示的，而子级包含可隐藏的可选内容。@DraganTL，请检查我的答案。很抱歉，这没有解决OP中的某个部分，我不想硬编码状态（自身或父级）。我刚刚解决了这个问题，将发布我的解决方案。请确保不要在引号中加上州名称。像

ng if=“$state.current.name=='state1'”

，它应该像

ng if=“$state.current.name===state1”