帶有重定向的AngularJS路由

Question

我正在與NG-路線AngularJS，具有導航比賽 ， 積分榜 ，當我點擊較量我想開一個子導航所有 ， 第一回合 ， 半決賽 ......我想用默認的allmatches.html視圖在下面顯示。

我寫了這樣的東西：

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

單擊“ 匹配項”以顯示“匹配項”子導航，效果很好。 我現在該怎么做才能在其下方顯示allmatches.html （我的意思是通過該路線到達matchs / all

我試圖添加

redirectTo : '/matches/all'

在

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

但它會重定向而不顯示子導航。

關於plnkr的示例： https ://plnkr.co/edit/UoTcOlcDQSwveCTbmxyY ? p = preview

Answer 1

好吧，這是您可運行的plnkr 。 這為您提供了一個簡單的選項卡處理邏輯。

TabView的

<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';
});

Answer 2

嘗試此操作在控制器級別定義子菜單

$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;
        };

之后，matchesmenu.html使用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>