javascript - angularjs ui-router - 当击中特定子路由时如何隐藏子菜单

Question

我正在研究一个 AngularJS/Ui-router 示例，其中有以下内容:

状态新闻，带有子状态音乐，当单击音乐时，新闻事件状态将保持，因为我有 news.music (音乐是新闻的子状态)。

然而，体育状态并不是新闻的子状态。当我点击体育时，如何保持新闻事件状态(蓝色背景)？

我看过很多相关的帖子，但它们太老了。

以下是代码截图:

app.config(function($stateProvider){
  $stateProvider.state('news', {
    url: '/news',
    templateUrl : 'news.html'
  })
});

app.config(function($stateProvider){
  $stateProvider.state('sports', {
    url: '/sports',
    templateUrl : 'sports.html'
  })
});

app.config(function($stateProvider){
  $stateProvider.state('news.music', {
    url: '/music',
    templateUrl : 'music.html'
  })
});

index.html

<ul class="nav nav-pills">
      <li role="presentation" ui-sref-active="active"><a ui-sref="news">News</a></li>
      <li role="presentation" ui-sref-active="active"><a ui-sref="about">About</a></li>
</ul>
<ui-view></ui-view>

news.html

<ul class="nav nav-tabs">
      <li role="presentation" ui-sref-active="active"><a ui-sref="sports">Sports</a></li>
      <li role="presentation" ui-sref-active="active"><a ui-sref="news.music">Music</a></li>
</ul>
<ui-view></ui-view>

还有一个正在运行的plunker

Answer 1

好吧，虽然这在您的应用程序设计中仍然是一个错误，但您可以通过将 news.sports 作为 news 的子路由来使用 Controller 来完成此操作，如下所示runnable plnkr demo 。您的问题应该是:“当点击特定的子路线时，如何隐藏子菜单”。

查看

<ul class="nav nav-tabs" ng-controller="submenuController" ng-show="showSubMenu">
  <li role="presentation" ui-sref-active="active"><a ui-sref="news.sports">Sports</a></li>
  <li role="presentation" ui-sref-active="active"><a ui-sref="news.music">Music</a></li>
</ul>
<ui-view></ui-view>

Controller

app.controller('submenuController', function ($scope, $rootScope, $state) {

  $scope.showSubMenu = true;

  $scope.$watch(function(){
      return $state.$current.name
  }, function(currentStateName){
     $scope.showSubMenu = currentStateName === 'news.sports' ? false : true;
  }) 
});