当前位置: 动力学知识库 > 问答 > 编程问答 >

angularjs - Angular ui router transitions back to the previous state

问题描述:

I am having a problem where in a certain scenario state transition will happen twice. I have an application that contains multiple SPAs. I use MVC routing to serve each SPA and withing each SPA I use angular ui router to handle the routing.

Picture below shows the drop down where each item in the drop down is a link to a different SPA

Picture below shows the tabs shown when you click on a SPA link.

The problem I'm having is specific to the following steps.

  1. Load the SPA. This will take you to the first tab.
  2. Click on any other tab and this will take you to the view specific to that tab.
  3. Click on the link to same SPA from the dropdown menu. This will take you back to the first tab.
  4. Try clicking on any other tab. This is where the problem occurs. ui-router will transition to the state represented by the tab we just clicked on however, it will take me back to the first tab right after.

Following are the relative code snippets.

Route:

angular.module('settings').config(routeConfig);

routeConfig.$inject = ["$stateProvider", "$urlRouterProvider"];

function routeConfig($stateProvider, $urlRouterProvider) {

// default route

$urlRouterProvider.when('', 'Tab1');

$stateProvider.state('Tab1',

{

url: '/Tab1',

templateUrl: '/link/To/template.html',

controller: 'tab1controller as ctrl'

});

$stateProvider.state('Tab2',

{

url: '/Tab2',

templateUrl: '/link/To/template.html',

controller: 'tab2controller as ctrl'

});

$stateProvider.state('Tab3',

{

url: '/Tab3',

templateUrl: '/link/To/template.html',

controller: 'tab3controller as ctrl'

});

Tabs HTML:

<li role="presentation"><a role="tab" ui-sref="Tab1" ui-sref-active="tab-title-active">Tab 1</a></li>

<li role="presentation"><a role="tab" ui-sref="Tab2" ui-sref-active="tab-title-active">Tab 2</a></li>

<li role="presentation"><a role="tab" ui-sref="Tab3" ui-sref-active="tab-title-active">Tab 3</a></li>

I tried listening to the $stateChangeStart event and noticed that during step 4 it tries to first go to Tab3 and then for some unknown reason back to Tab1. Also, as you can see in the second picture, two tabs are highlighted meaning ui-sref-active has marked both tabs to be active.

I've tried changing how the state is changed by manually intercepting the $stateChangeStart event and then doing the transition through $state.go and $state.transitionTo with no luck.

分享给朋友:
您可能感兴趣的文章:
随机阅读: