2016-09-16 31 views
0

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

;

+0

我不明白为什么你需要''不惜一切时,你正在做的是将它们用于导航。使用tabs html和'ui-sref'和'ui-sref-active'作为链接会不会很简单? – charlietfl

+0

这是很难告诉你在做什么,你错了共享代码...你可以发布一个最小的小提琴手,plunkr或类似的东西? – raven

+0

@charliefl这也是我的想法,但我的要求强制我使用uib-tabs。 – hussain

回答

2

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”选项卡激活。

+0

感谢它帮我解决这个问题别无选择。 – hussain

相关问题