Question

当我的应用程序第一次加载时，它会加载DIT页面，但是一旦你开始点击标签后标签就不显示活动了，所以我想在应用程序加载时激活第一个标签<uib-tabset active="active"> <uib-tab ng-repeat="tab in tabs" select="go(tab.route)" heading="{{tab.heading}}" active="tab.active" disable="tab.disabled">  </uib-tab> </uib-tabset> 。如何通过以下代码实现该任务？

main.html中

 $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);
       });
   });

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

app.js

{{1}}

Answer 1

从the docs开始，active中绑定的<uib-tabset active="active">变量必须是您要显示为有效的标签的索引。

在控制器中将$scope.active变量设置为0（或指向您希望的任何索引）应该会有所帮助。

此外，您最好根据当前的$状态直接动态设置$scope.active变量（而不是依赖于每个标签的active bool并在{{{}}期间对其进行操作{1}}，可能存在显示2个以上活动标签的风险。）

$stateChangeSuccess

添加好处是在浏览器重新加载后，CTRL将读取您当前的状态（例如，＆＃34; app.st＆＃34;）并设置＆＃34; app.st＆＃34;选项卡根据匹配的路径激活。

如何在使用tabset加载应用程序时激活标签？

1 个答案: