使用选项卡集加载应用程序时如何使选项卡处于活动状态？

Question

当我的应用程序第一次加载时，它会加载 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',
      })

;

Answer 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" 选项卡设置为活动状态。

使用选项卡集加载应用程序时如何使选项卡处于活动状态？

How to make tab active when application load using tabset?

html

javascript

angularjs

angular-ui-bootstrap