javascript - 从不同页面加载时如何使选项卡处于事件状态

Question

我的页面“管理个人资料”中有一个子菜单可用。默认情况下，第一个选项卡将处于事件状态，但是当我想从不同的页面转到特定的菜单更改密码或支付网关时。我不能让它活跃起来。需要帮助。

当前页面:

<ul class="nav nav-pills nav-justified" >
    <li class="tablist" ng-class="tab === 1? 'active' : ''">
        <a ng-click="changeTab(1)" style="cursor: pointer;"><b>MANAGE PROFILE</b></a>
    </li>
    <li ng-class="tab === 2? 'active' : ''" style="border-left: 1px solid white; border-right: 1px solid white;">
        <a ng-click="changeTab(2)" style="cursor: pointer;"><b>CHANGE PASSWORD</b></a>
    </li>
    <li ng-class="tab === 3? 'active' : ''">
        <a ng-click="changeTab(3)" style="cursor: pointer;"><b>PAYMENT HISTORY</b></a>
    </li>
</ul>

JS:

$scope.tab = 1;

$scope.changeTab = function(idx)
{
    $scope.tab = idx;
};

应用程序.js:

 .when('/manageProfile', {
                controller: 'ManageProfileController',
                templateUrl: 'view/manageProfile.view.html',
                controllerAs: 'vm'
            })

简介.html

<li><a href=#/manageProfile>ManageProfile</a></li>
<li><a href =#/manageProfile>ChangePassword</a></li>

在配置文件页面中选择更改密码时，如何加载使更改密码选项卡处于事件状态。

Answer 1

我在我的元素上做了这个，你可以检查我的路线和 Controller

garageCtrl.js

class GarageController {
  /*@ngInject*/
 constructor($state,$stateParams) {
 this.$state = $state;
 this.$stateParams = $stateParams;

 this.filter = this.$stateParams.filter || 'all';

// set Initial tab based on the params in URL;
switch(this.filter) {
  case 'all': {
    this.activeTab = 0;
    break;
  }
  case 'commercial': {
    this.activeTab = 1;
    break;
  }
  case 'residential': {
    this.activeTab = 2;
    break;
  }
   default: null
  }
}

filterChanged(filter) {
 this.filter = filter;
 //SOME CODES FOR ASYNC//
 this.getGarageList(filter);
 this.pageChanged(this.page);
}

}

GarageController.$inject = [
  '$state',
  '$stateParams'
  ];
export default GarageController;

这是 View ，我为我的选项卡使用了指令angular-bootstrap:

   <uib-tabset active="$ctrl.activeTab" justified="true">
    <uib-tab index="0" heading="All"
      ng-click="$ctrl.filterChanged('all')">
    </uib-tab>
    <uib-tab index="1" heading="Commercial"
      ng-click="$ctrl.filterChanged('commercial')">
    </uib-tab>
    <uib-tab index="2" heading="Residential"
      ng-click="$ctrl.filterChanged('residential')">
    </uib-tab>
    <uib-tab index="3" heading="Valet"
      ng-click="$ctrl.filterChanged('valet')">
    </uib-tab>
  </uib-tabset>

这是我的routes.js，我使用了angular-ui-router:

.state('dashboard.garage', {
  url: '/dashboard/garage?page&filter',
  views: { 
    '': { template: '<garage></garage>' },
    'content@dashboard.garage': { 
      templateUrl: 'src/app/templates/admin.dashboard.garage.template.html' 
    }
  },
  params: {
    page: {
      value: '1',
      squash: true
    },
    filter: {
      value: 'all',
      squash: true
    }
  }
})