Как сделать вкладку активной при загрузке приложения с помощью табуляции?

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, active Переменная, связанная в <uib-tabset active="active">, должна быть указателем вкладки, которую вы хотите показать как активную.

Настройка переменной $scope.active на 0 (или в зависимости от того, какой индекс вы хотите) в вашем контроллере должна помочь.

---

Кроме того, она может быть лучше для вас, чтобы вместо динамически устанавливать переменную $scope.active сразу на основе вашего текущего $ состояния (вместо того, чтобы полагаться на active BOOL для каждой вкладки и манипулируя его во время $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» к активным на основе согласованного маршрута.