使用标签集加载应用程序时如何使标签处于活动状态？答案

【问题标题】：How to make tab active when application load using tabset?使用标签集加载应用程序时如何使标签处于活动状态？
【发布时间】：2016-09-17 05:23:27
【问题描述】：

当我的应用程序第一次加载时，它会加载 app.dit 页面，但是一旦您开始单击选项卡后，选项卡就不会显示为活动状态，因此我想在应用程序加载时使第一个选项卡 DIT 处于活动状态。如何使用以下代码完成该任务？

main.html

<uib-tabset active="active">
                <uib-tab ng-repeat="tab in tabs" select="go(tab.route)" heading="{{tab.heading}}" active="tab.active" disable="tab.disabled">
                    <!--<div ui-view="">{{tab.route}}</div>-->
                </uib-tab>
            </uib-tabset>

ctrl.js

 $scope.tabs = [{
       heading: 'DIT',
       route: 'app.dit',
       active: true
   }, {
       heading: 'ST',
       route: 'app.st',
       active: false
   }, {
       heading: 'UAT',
       route: 'app.uat',
       active: false
   }, ];

   $scope.go = function(route) {
       $state.go(route);
   };

   function active(route) {
       return $state.is(route);
   }
   $scope.active = active;

   $scope.$on("$stateChangeSuccess", function() {
       $scope.tabs.forEach(function(tab) {
           tab.active = active(tab.route);
       });
   });

app.js

  $urlRouterProvider.otherwise(function($injector) {
      var $state = $injector.get('$state');
      $state.go('app.dit');
  });

  $stateProvider
      .state('app', {
          abstract: true,
          url: '',
          templateUrl: 'web/global/main.html',
          controller: 'MainCtrl'
      })
      .state('app.dit', {
          url: '/dit',
          templateUrl: 'view/partials/dit.html',
          controller: 'DitCtrl'
      })
      .state('app.st', {
          url: '/st',
          templateUrl: 'view/partials/st.html',
          controller: 'StCtrl'
      })
      .state('app.uat', {
          url: '/uat',
          templateUrl: 'view/partials/uat.html',
          controller: 'UatCtrl'
      })
      .state('app.prod', {
          url: '/prod',
          templateUrl: 'view/partials/prod.html',
          controller: 'ProdCtrl',
      })

;

【问题讨论】：

我不明白为什么您需要<uib-tabs>，而您所做的只是使用它们进行导航。仅使用标签 html 和 ui-sref 和 ui-sref-active 作为链接不是更简单吗？
很难说你在共享代码时做错了什么......你能发布一个最小的提琴手、plunkr 或类似的东西吗？
@charliefl 这也是我的想法，但我的要求强制我使用 uib-tabs。
@Robert 抱歉没有访问 jsfiddle 等，我列出了与问题相关的所有内容
我不明白...可以实现完全相同的显示并使其更简单而无需使用它们。仍然可以从数组中渲染每个选项卡，因此模板 html 不会更大

标签： javascript html angularjs angular-ui-bootstrap

【解决方案1】：

从the docs 开始，<uib-tabset active="active"> 中绑定的active 变量必须是您要显示为活动的选项卡的索引。

在您的控制器中将 $scope.active 变量设置为 0（或您希望的任何索引）应该会有所帮助。

此外，您最好根据当前的 $state 直接动态设置 $scope.active 变量（而不是依赖于每个选项卡的 active 布尔值并在 $stateChangeSuccess 期间对其进行操作，这可能会冒显示 2+ 个活动标签的风险）。

var returnActiveTabIndex = function() {
    var current_route = $state.$current.name;  //or however you want to find your current $state
    var tab_routes = $scope.tabs.map(function(tab) { return tab.route });

    var active_index = tab_routes.indexOf(current_route);
    return (active_index > -1) ? active_index : 0;
};

$scope.active = returnActiveTabIndex();

额外的好处是在浏览器重新加载后，CTRL 将读取您当前的状态（例如，“app.st”）并根据匹配的路由将“app.st”选项卡设置为活动状态。

【讨论】：