Angular ui-路由器 ng-if 当前确切状态

Question

主要是因为我是 ui-router 的新手，所以无法管理我的父子状态。但是，我进行了研究并发现了需要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>

我想要完成什么？当父加载时，我希望背景显示一些东西。它占据了整个屏幕。 ui-view 不会占据整个屏幕。因此，我希望在路由与父级的状态不完全匹配时隐藏或删除背景元素（如果父级的路由为 /root/parent，我希望背景仅在状态完全为 /root/parent 时可见，而不是/root/parent/child1).

只有当我提供准确的预期路线时，我才能实现我想要的。例如 ng-if="'root.parent' | isState".

此外，ui-sref-active="active" 在显示子视图时保留 active class（这是预期的，但我希望 class 仅在路线完全匹配时激活).

但是，我觉得将父路由硬编码到视图中并不是一件好事。我只是想让它匹配它所属的任何路线。因此，如果我以后决定将其移动到 /root/parent/car，我不必更新 ng-if 和 ui-sref-active 来反映更改。

有没有人运行解决了这个问题？

Answer 1

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

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

</div>

Answer 2

这可以通过几种方式完成，因为您可能有一个 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 为 parent state

时执行

或者，

您只需从 child 条路线中删除 active class，

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

现在，将 CSS 添加到活动 class 以便它仅出现在 parent.

的背景中

Answer 3

感谢您的回复，但我寻求的解决方案的条件之一是尽量避免对状态进行硬编码。我的解决方法如下：

对于导航 links，我必须阅读 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 link 仅在 URL 恰好等于父项的 URL 时才处于活动状态。

至于showing/hiding后台，我有如下代码。再次注意，在这两种情况下，我都不会硬编码状态名称：

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>

Answer 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 了解更多信息。

Angular ui-路由器 ng-if 当前确切状态

Angular ui-router ng-if current exact state

parent-child

nested-routes

angularjs

angular-ui-router