角度路由多標籤

Question

我對我們的項目有角度路由問題。 看看示例頁面。 Example page 選擇設置在主導航欄中。你可以看到3個標籤。一般，電子郵件和短信。選擇電子郵件選項卡。它有兩個「子選項卡」，其中電子郵件選項卡1已預先選定（這是預期的行爲）。現在問題來了：選擇第二個子標籤電子郵件標籤2，和主要電子郵件選項卡被取消選中。我們如何確保在選擇電子郵件選項卡2時還選擇了主電子郵件選項卡？

P.S .:同樣的問題是與SMS標籤。

Javascript代碼，你還可以找到演示頁：

var app = angular.module('plunker', ['ui.router']); 

app.config(function($stateProvider, $urlRouterProvider){ 
    $urlRouterProvider.otherwise("/"); 

    $stateProvider 
      .state("home", { 
       url: '/', 
       templateUrl: 'home.html', 
       data: {} 
      }) 
      .state('settings', { 
       url: '/admin-settings', 
       templateUrl: 'admin_settings.html', 
       data: {} 
      }) 
      .state('settings.general', { 
       url: '/general', 
       templateUrl: 'admin_settings_general.html', 
       data: {} 
      }) 
      .state('settings.email', { 
       url: '/email', 
       templateUrl: 'admin_settings_email.html', 
       data: {} 
      }) 
      .state('settings.email.tab1', { 
       url: '/tab1', 
       templateUrl: 'admin_settings_email_tab1.html', 
       data: {} 
      }) 
      .state('settings.email.tab2', { 
       url: '/tab2', 
       templateUrl: 'admin_settings_email_tab2.html', 
       data: {} 
      }) 
      .state('settings.sms', { 
       url: '/sms', 
       templateUrl: 'admin_settings_sms.html', 
       data: {} 
      }) 
      .state('settings.sms.tab1', { 
       url: '/tab1', 
       templateUrl: 'admin_settings_sms_tab1.html', 
       data: {} 
      }) 
      .state('settings.sms.tab2', { 
       url: '/tab2', 
       templateUrl: 'admin_settings_sms_tab2.html', 
       data: {} 
      }) 
    ; 
}); 

app.controller('MainCtrl', function($scope) { 
    $scope.name = 'World'; 
}); 


app.controller("AdminSettingsCtrl", function($scope){ 
    $scope.settingsTabs = [ 
    {name: 'GENERAL', route: 'settings.general'}, 
    {name: 'EMAIL', route: 'settings.email.tab1'}, 
    {name: 'SMS', route: 'settings.sms.tab1'} 
    ]; 
}); 

app.controller("AdminSettingsEmailCtrl", function($scope){ 
    $scope.emailTabs = [ 
    {name: 'EMAIL TAB1', route: 'settings.email.tab1'}, 
    {name: 'EMAIL TAB2', route: 'settings.email.tab2'} 
    ]; 
}); 

app.controller("AdminSettingsSmsCtrl", function($scope){ 
    $scope.smsTabs = [ 
    {name: 'SMS TAB1', route: 'settings.sms.tab1'}, 
    {name: 'SMS TAB2', route: 'settings.sms.tab2'} 
    ]; 
}); 

謝謝。

Answer 1

您可以將軌道下面選擇

$scope.activeTab="GENERAL"; // Default selected 
    $scope.tabClicked = function(tab){ //function will trigger when TAB selected 
    console.log(tab); 
    $scope.activeTab = tab; 
    } 

刪除TAB info.Like「AdminSettingsCtrl」創建一個變量「UI-S REF-主動=」活動「」，並添加納克級到您admin_settings。 html

<li role="presentat" ng-repeat="tab in settingsTabs" ng-class="{active : activeTab == tab.name}"> 

這將解決您的問題。我已經更新了上述更改的相同示例。你可以看看。 http://plnkr.co/edit/gCH1AbhjL0MzbEvro7jN?p=preview