javascript - 带重定向的 AngularJS 路由

Question

我正在使用 ng-route 开发 AngularJS，有一个导航 Matches，Standings，当我点击 Matches 时，我想打开子导航 All、第一轮、半决赛 ...我默认要 allmatches.html View 显示在下方。

我是这样写的:

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

在我点击Matches 后显示匹配子导航，它工作正常。我现在该怎么做才能在其正下方显示 allmatches.html(我指的是通往 ma​​tches/all

的路线

我尝试添加

redirectTo : '/matches/all'

在

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

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

plnkr 上的示例:https://plnkr.co/edit/UoTcOlcDQSwveCTbmxyY?p=preview

Answer 1

好的，给你 - runnable plnkr .这为您提供了一个简单的选项卡处理逻辑。

标签 View

<div ng-controller="TabCtrl">
  <ul class="nav nav-tabs">
    <li role="presentation" ng-class="{'active' : activeTab === 'all'}">
      <a ng-click="activeTab = 'all'">All</a>
    </li>
    <li role="presentation" ng-class="{'active' : activeTab === 'first-round'}">
      <a ng-click="activeTab = 'first-round'">1st Round</a>
    </li>
    <li role="presentation" ng-class="{'active' : activeTab === 'semi-finals'}">
      <a ng-click="activeTab = 'semi-finals'">Semi Finals</a>
    </li>
    <li role="presentation" ng-class="{'active' : activeTab === 'finals'}">
      <a ng-click="activeTab = 'finals'">Final</a>
    </li>
  </ul> 
  <div>
    <div class="" ng-switch="activeTab">
        <div ng-switch-when="all">
            <div data-ng-include="'first-round.html'"></div>
            <div data-ng-include="'semifinals.html'"></div>
            <div data-ng-include="'finals.html'"></div>
        </div>
        <div ng-switch-when="first-round">
            <div data-ng-include="'first-round.html'"></div>
        </div>
        <div ng-switch-when="semi-finals">
            <div data-ng-include="'semifinals.html'"></div>
        </div>
        <div ng-switch-when="finals">
            <div data-ng-include="'finals.html'"></div>
        </div>
    </div>
  </div>
</div>

AngularJS 应用

var app = angular.module('myApp',['ngRoute'])
.config(function ($routeProvider) {
    $routeProvider
      .when('/matches', {
        templateUrl: 'matchesmenu.html'
      })
      .when('/matches/all', {
        templateUrl: 'allmatches.html'
      })

}).controller('TabCtrl', function ($scope) {
    $scope.activeTab = 'all';
});