ng-hide 基于父状态答案

【问题标题】：ng-hide based on parent stateng-hide 基于父状态
【发布时间】：2014-10-14 13:56:09
【问题描述】：

我的主控制器中有一个导航栏，我想要一个基于 url 显示/隐藏的链接。我正在使用 ui-router 进行路由，所以我认为我可以使用 $state 来获取当前状态的父状态，但我不知道如何。我以前这样做是为了获取当前状态并且它可以工作

<li ng-hide="$state.current.name === 'new-sector'">
    <a ui-sref="new-sector">+ Add new sector!</a>
</li>

但是现在，我正在处理嵌套状态，因此当前状态是 new-sector.location。我的问题是我希望该链接隐藏在所有新部门子状态中！

提前感谢您的帮助！

【问题讨论】：

【解决方案1】：

添加到 Chris T 的答案：

为避免创建控制器并为每个状态注入 $scope 和 $state，您可以简单地使用 .run() 并将状态信息存储在 rootscope 中。

app.run( function($state, $rootScope){
    $rootscope.stateHolder = $state.current;
  }
);

此外，如果您只对州名感兴趣，只需在 $state.current 末尾添加 .name 即可。

然后可以通过以下方式轻松访问：

<div ng-hide="stateHolder.name == 'home'">
  This will be hidden on the home page.
</div>

【讨论】：

【解决方案2】：

您始终可以使用$state.includes(stateName) 来检查当前活动状态是否等于状态stateName 的子状态。

这是一个example plnkr，显示了$state.includes 的用法。

更多详情请关注wiki

【讨论】：

是的。 ng-hide="$state.includes('new-sector')"。不过，您必须在范围上提供 $state 。我倾向于使用app.run(function($state, $scope) { $scope.$state = $state; }); 块将其添加到根范围。