Question

我的项目中有Angular路由问题。看一下示例页面。 Example page 在主导航栏中选择设置。你可以看到3个标签。一般，电子邮件和短信。选择电子邮件标签。它有两个“子选项卡”，其中预选了电子邮件tab1 （这是预期的行为）。现在问题出现了：选择第二个子标签电子邮件标签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

您可以在＆＃34; AdminSettingsCtrl＆＃34;中创建一个变量。这将跟踪选定的TAB信息。如下所示

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

删除＆＃34; ui-sref-active =＆＃34;有效＆＃34;＆＃34;并将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

角度路由多选项卡

1 个答案: