Angular Routing Multi Tabs

Question

Ich habe ein Problem mit Angular Routing in unserem Projekt. Werfen Sie einen Blick auf die Beispielseite. Example page Wählen Sie Einstellungen in der Navigationsleiste. Sie können dort 3 Tabs sehen. Allgemein, E-Mail und SMS. Wählen Sie E-Mail Registerkarte. Es hat zwei "Untertabellen", wobei Email tab1 vorgewählt ist (dies ist das erwartete Verhalten). Jetzt kommt das Problem: Wählen Sie den zweiten Unterreiter E-Mail tab2, und Haupt E-Mail Registerkarte ist deaktiviert. Wie können wir sicherstellen, dass auch die Registerkarte E-Mail ausgewählt wurde, wenn die Registerkarte E-Mail 2 ausgewählt wurde?

S.S .: Das gleiche Problem ist mit der Registerkarte SMS.

Javascript Code, den Sie auch auf Demo-Seite finden:

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

Danke. unter

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

Remove "ui-sref-aktiv =" aktiv "" und fügen ng-Klasse zu Ihrem admin_settings

Answer 1

Sie können eine Variable in "AdminSettingsCtrl" erstellen, die TAB info.Like ausgewählt wird verfolgen. html

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

Dies wird Ihr Problem lösen. Ich habe das gleiche Beispiel mit den obigen Änderungen aktualisiert. Sie können einen Blick darauf werfen. http://plnkr.co/edit/gCH1AbhjL0MzbEvro7jN?p=preview