如何使用tabset在應用程序加載時使選項卡激活？

當我的應用程序加載第一次加載頁面app.dit，但一旦你開始點擊它之後的作品的標籤，所以我想使第一片DIT主動當應用程序加載選項卡不顯示活動。我如何用下面的代碼實現這個任務？如何使用tabset在應用程序加載時使選項卡激活？

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', 
     })

;

來源

2016-09-16 hussain

我不明白爲什麼你需要''不惜一切時，你正在做的是將它們用於導航。使用tabs html和'ui-sref'和'ui-sref-active'作爲鏈接會不會很簡單？ – charlietfl

這是很難告訴你在做什麼，你錯了共享代碼...你可以發佈一個最小的小提琴手，plunkr或類似的東西？ – raven

@charliefl這也是我的想法，但我的要求強制我使用uib-tabs。 – hussain

從the docs,active變量綁定在<uib-tabset active="active">必須是要顯示爲活動選項卡的索引。

設置$scope.active變量爲0（或取其索引你願意）在您的控制器應有所幫助。

此外，它可能是更好地爲您而不是動態設置$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」選項卡激活。

來源

2016-09-16 21:23:27

感謝它幫我解決這個問題別無選擇。 – hussain

如何使用tabset在應用程序加載時使選項卡激活？

回答

相關問題