Angular ui-router ng-if 当前确切状态答案

【问题标题】：Angular ui-router ng-if current exact stateAngular ui-router ng-if 当前确切状态
【发布时间】：2017-03-23 06:14:44
【问题描述】：

主要是因为我是 ui-router 的新手，所以无法管理我的父子状态。但是，我进行了研究并遇到了需要对路线进行硬编码但不是动态的解决方案。

我目前拥有的：

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

我想要完成什么？当父母加载时，我希望背景显示一些东西。它占据了整个屏幕。 ui-view 不会占据整个屏幕。因此，我希望在路由与父级状态不完全匹配时隐藏或删除背景元素（如果父级路由是/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 以反映更改。

有没有人遇到过这个问题并且能够解决它？

【问题讨论】：

你有父子层次结构的原因是什么？
从子路由 <a ui-sref=".child1">Child 1</a> 中删除 active 类，并将 css 添加到 active 类中，使其仅出现在背景中。
@arqam 页面的主要内容实际上显示为背景，子项包含可以隐藏的可选内容。

标签： angularjs angular-ui-router parent-child nested-routes

【解决方案1】：

根据您的情况使用$state.current.name

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

</div>

【讨论】：

确保不要将州名放在引号中。像 ng-if="$state.current.name === 'state1'" ，应该像 ng-if="$state.current.name === state1"

【解决方案2】：

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

对于导航链接，我必须阅读 ui-router 指令代码以找到 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>

该指令确保Parent 链接仅在 URL 完全等于父 URL 时才处于活动状态。

至于显示/隐藏背景，我有以下代码。再次注意，在这两种情况下，我都不会硬编码州名：

function ParentController ($scope, $state, $stateParams, $q) {
    var model = this;
    var controllerState = $state.current.name;

    $scope.showBackground = true;

    $scope.$on('$stateChangeSuccess', onStateChange);

    init();

    function init () {
        onStateChange();
    }

    function onStateChange() {
        $scope.showBackground = $state.is(controllerState);
    }
}

然后在视图中：

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

【讨论】：

【解决方案3】：

这可以通过几种方式完成，因为您可能有一个单独的parentController。

您可以使用ng-if检查控制器中的状态并阻止它显示

控制器：

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>

只有在当前 stateName 是父状态时才会执行上述操作

或者，

您可以简单地从子路由中删除 active class，

 <a ui-sref=".child1">Child 1</a> 
 <a ui-sref=".child2">Child 2</a>

现在，将 CSS 添加到活动类中，使其仅出现在父级的背景中。

【讨论】：

@DraganTL，请检查我的回答。
对不起，这并没有解决 OP 中的一个部分，我不想硬编码一个状态（自身或父级）。我刚刚解决了这个问题，并将发布我的解决方案。

【解决方案4】：

最简单的解决方案是检查控制器中的状态并做你需要做的事情

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
    }
});

查看Docs 了解更多信息。

【讨论】：