如何使用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在应用程序加载时使选项卡激活？

回答

相关问题