AngularJS:UI-Router切换选项卡时始终选择第一个选项卡

时间:2015-04-15 19:50:16

标签: javascript html angularjs tabs angular-ui-router

我有以下html标记:

<div class="col-lg-2 col-md-2 panel-container">
  <tabset vertical="true" type="pills">
    <tab ng-repeat="tab in tabsViews" select="selectView(tab.index)" class=" {{tabsViews[tab.index-1]['invalid'] ? 'invalid-tab': 'valid-tab' }}">
      <tab-heading>{{tab.title}}</tab-heading>
    </tab>
  </tabset>
</div>

<div class="col-lg-10 col-md-10 panel-container">
  <div data-ui-view data-autoscroll="false"></div>
</div>

在控制器中我以这种方式定义了标签:

$scope.tabsViews = [{
  index: 1,
  name: 'accountUDFs',
  invalid: false,
  title: resourceFactory.getResource('Labels', 'xUDFs').format(resourceFactory.getResource('Labels', 'account'))
}, {
  index: 2,
  name: 'invoiceUDFs',
  invalid: false,
  title: resourceFactory.getResource('Labels',
    'xUDFs').format(resourceFactory.getResource('Labels', 'invoice'))
}, {
  index: 3,
  name: 'confirmationText',
  invalid: false,
  title: resourceFactory.getResource('Labels', 'confirmationText')
}];

我定义了以下状态:

app.config(['$stateProvider',
  function($stateProvider) {
    $stateProvider.state('home', {
      url: '/',
      controller: 'prefsAcsController',
      template: ''
    }).state('edit', {
      url: '/edit',
      controller: 'prefsAcsCrudController',
      templateUrl: '/customerAccounts/PrefsAcs'
    }).state('accountUDFs', {
      url: '/AccountUDFs',
      templateUrl: '/customerAccounts/PrefsAcs/AccountsUDFs'
    }).state('invoiceUDFs', {
      url: '/InvoiceUDFs',
      templateUrl: '/customerAccounts/PrefsAcs/InvoiceUDFs'
    }).state('confirmationText', {
      url: '/ConfirmationText',
      templateUrl: '/customerAccounts/PrefsAcs/ConfirmationText'
    });
  }
]);

因此,当我从菜单中进入“首选项”页面时,第一个选项卡被选中,一切都很好。

但是,我还添加了指向另一页中第二个标签的链接

<a href='/CustomerAccounts/PrefsAcs#/InvoiceUDFs'>

现在,当我点击此链接时,我仍然在控制台中看到一条消息,即第一个标签即将被激活,该标签会突出显示。但是我看到第二个标签的内容就是我想要的内容。

您知道自动选择第一个标签的原因吗?

当我提供完整的网址并突出显示正确的标签时,您知道我该怎么做才能跳过selectView代码吗?

0 个答案:

没有答案