Угловая маршрутизация нескольких вкладок

Question

У меня есть проблема с Угловой маршрутизацией в нашем проекте. Взгляните на страницу примера. Example page Выбрать Настройки в основной навигационной панели. Вы можете увидеть там 3 вкладки. Общие сведения, электронная почта и смс. Выбрать Email вкладка. Он имеет два «подкласса», где Предварительная выбор электронной почты танка1 (это ожидаемое поведение). Теперь возникает вопрос: выберите второй субтитр Эл. Почта tab2, а также главный Email вкладка не выбрана. Как мы можем гарантировать, что вы выбрали также основную вкладку электронной почты, когда выбрана вкладка электронной почты ?

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

Вы можете создать переменную в "AdminSettingsCtrl", который будет отслеживать выбранный TAB info.Like ниже

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

Remove "щ-sref-активный =" активный "" и добавить нг-класс для ваших admin_settings. html

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

Это решит вашу проблему. Я обновил тот же пример с приведенными выше изменениями. вы можете взглянуть. http://plnkr.co/edit/gCH1AbhjL0MzbEvro7jN?p=preview