Javascript 带重定向的AngularJS路由

我正在使用ng路线进行AngularJS，有一个导航比赛，排名，当我点击比赛时，我想打开一个子导航所有，第一轮，半决赛。。。默认情况下，我希望下面显示allmatches.html视图

我写了这样的东西：

$routeProvider
  .when('/matches', {
    templateUrl: 'views/matchesmenu.html',
    controller: 'matchesmenuCtrl',
  })

要显示matches子导航，请单击matches（匹配），它工作正常。我现在可以做些什么来显示它下面的allmatches.html（我指的是到matches/all

我试图补充

redirectTo : '/matches/all'

在

但它重定向而不显示子导航

plnkr上的示例：

好的，这是您的-。这为您提供了一个简单的选项卡处理逻辑

TabView 试试这个 在控制器级别定义子菜单

$scope.tabs = [
            {title: 'All', url: 'allmatches.html', active: true, type: 'all'},
            {title: '1st Round', url: 'semiFinals.html', active: false, type: 'semi'}
        ];

//句柄选项卡单击事件

$scope.tabClick = function (index) {
            angular.forEach($scope.tabs, function (tab) {
                tab.active = false;
            });
            $scope.selectedTab = index;
            $scope.tabs[index].active = true;
        };

然后使用ng include选项加载内容

<div class="row clearfix">
  <div class="col-xs-12">
    <ul class="nav nav-tabs">
        <li role="presentation" ng-class="{'active':tab.active}" ng-repeat="tab in tabs" ><a href="#/log/{{tab.type}}" >{{tab.title}}</a></li>

    </ul>
  </div>
</div>

<div class="row clearfix">

            <div class="col-xs-12"  ng-repeat="tab in tabs"  ng-model="tab" heading="{{tab.title}}" active="tab.active" disable="tab.disabled">
              <div ng-include src="tab.url" ng-if="tab.active"> </div>
            </div>

</div>
</div>

为什么要使用路由来显示子导航？子导航包含从工厂/控制器接收的动态项目。我找不到更好的解决方案。如果我在单击匹配时直接路由到匹配项/全部，那么当我在子导航中单击另一项时我可以做什么？例如，当我单击半决赛时，我如何保持子导航di显示以下内容并将其替换为与半决赛相关的内容？您可以通过切换ui路由器而不是使用

$routeProvier

来实现这一点。这样，您可以创建类似

子菜单项的状态链接

。我从未使用过ui路由器。您能解释更多我必须做的事情吗？或者为我提供指向示例的链接吗？您愿意吗需要将子导航部分放在单独的视图中吗？它们只是链接列表？为什么不将它们放在与导航项相同的html中。将子导航列表绑定到范围变量。当用户单击任何导航项时，将子导航项指定给上述范围变量。希望这能回答您的问题是的，很好。我只想sh想知道当我单击子导航选项卡时是否可以更新uri。例如，单击第一轮选项卡将使我的uri/matches/1stround，而当我单击all时，将使其匹配/all？如果很复杂，您提供的解决方案对我来说很好，谢谢。@EddyG您可以使用ui路由器而不是ngRoute来实现这一点。例如，

$state.go（'your.state'，{}，{notify:false}）

。其中

notify:false

不会强制重新提交应用程序，它只需根据您的状态更改URL。@EddyG这是否足以帮助您获得勾号？=）感谢@lin的努力。我学会了如何使用ui.router，而且它似乎比您所说的ngRoute更好。干杯m8=）很高兴帮助您

$scope.tabs = [
            {title: 'All', url: 'allmatches.html', active: true, type: 'all'},
            {title: '1st Round', url: 'semiFinals.html', active: false, type: 'semi'}
        ];

$scope.tabClick = function (index) {
            angular.forEach($scope.tabs, function (tab) {
                tab.active = false;
            });
            $scope.selectedTab = index;
            $scope.tabs[index].active = true;
        };

<div class="row clearfix">
  <div class="col-xs-12">
    <ul class="nav nav-tabs">
        <li role="presentation" ng-class="{'active':tab.active}" ng-repeat="tab in tabs" ><a href="#/log/{{tab.type}}" >{{tab.title}}</a></li>

    </ul>
  </div>
</div>

<div class="row clearfix">

            <div class="col-xs-12"  ng-repeat="tab in tabs"  ng-model="tab" heading="{{tab.title}}" active="tab.active" disable="tab.disabled">
              <div ng-include src="tab.url" ng-if="tab.active"> </div>
            </div>

</div>
</div>