Angular 路由多选项卡

Question

我的项目 Angular 路由有问题。查看示例页面。 Example page Select 主导航栏中的设置。您可以看到 3 个选项卡。一般，电子邮件和短信。 Select 电子邮件 选项卡。它有两个 "subtabs"，其中 Email tab1 是预selected（这是预期的行为）。现在问题来了：select 第二个子选项卡 电子邮件选项卡 2 和主 电子邮件 选项卡被删除select。 select 当 电子邮件选项卡 2 被 select 编辑时，我们如何确保主电子邮件选项卡也被编辑？

P.S.: 短信选项卡也有同样的问题。

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" 中创建一个变量，它将跟踪下方 info.Like 的选定 TAB

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

删除 "ui-sref-active="active"" 并将 ng-class 添加到您的 admin_settings.html

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

这将解决您的问题。我已经用上述更改更新了相同的示例。你可以看看。 http://plnkr.co/edit/gCH1AbhjL0MzbEvro7jN?p=preview

Angular 路由多选项卡

Angular Routing multi tabs

javascript

angularjs

angular-routing

angular-ui-router