Angualar ui-router automatically changing route

Question

I am getting issue during angular state change

My State configuration is as :

 function($stateProvider) {
    $stateProvider
        .state('monetization', {
            url: '/monetization',
            templateUrl: 'app/modules/monetization/monetization.html',
            controller: 'MonetizationCtrl'
        })
        .state('monetization.configurationGeneral', {
            url: '^/monetization/configuration/general',
            templateUrl: 'app/modules/monetization/configuration/general/general.html',
            controller: 'MonetizationConfigurationGeneralCtrl',
        })
        .state('monetization.configurationVersion', {
            url: '^/monetization/configuration/version',
            templateUrl: 'app/modules/monetization/configuration/version/version.html',
            controller: 'MonetizationConfigurationVersionCtrl',
        })
        .state('monetization.categorySearch', {
            url: '^/monetization/configuration/categorySearch',
            templateUrl: 'app/modules/monetization/configuration/category/categorySearch.html',
            controller: 'MonetizationCategorySearchCtrl',
        })
        //Provider Configuration
        .state('monetization.providerList', {
            url: '^/monetization/provider/list',
            templateUrl: 'app/modules/monetization/provider/providerList.html',
            controller: 'MonetizationProviderListCtrl',
        })
        .state('monetization.providerDetails', {
            url: '^/monetization/providerDetails/:providerId',
            templateUrl: 'app/modules/monetization/provider/providerHistory.html',
            controller: 'ProviderHistoryCtrl',
            params: {
                providerId: null
            }
        });
}

I am automatically being redirected from monetization.categorySearch to montetization.providerList

I am not having any clue please help..

score 1 · Accepted Answer · edited May 23 '17 at 12:07

I could confirm, that your state definition is ok AS IS - there is no REDIRECT turned on. So, it must be elsewhere - not in the $stateProvider configuration.

Check this plunker to see, that all these links work as expected:

<a href="#/monetization">
<a href="#/monetization/configuration/general">
<a href="#/monetization/configuration/categorySearch">
<a href="#/monetization/provider/list">

<a ui-sref="monetization">
<a ui-sref="monetization.configurationGeneral">
<a ui-sref="monetization.categorySearch">
<a ui-sref="monetization.providerList">

Check it here

NOTE the small issue I see above is a typo "montetization.providerList"

I am automatically being redirected from monetization.categorySearch to montetization.providerList

which should be monetization.providerList (not monte...), but it should not be related to that issue

Suggestion, carefully check all the event hooks like:

$rootScope.$on('$stateChangeStart', function(evt, to, params) {

    ...
    $state.go('monetization.providerList')

});

(check e.g. this: Redirect a state to default substate with UI-Router in AngularJS)

And also the .when setting on url provider

$urlRouterProvider.when('/monetization/configuration/categorySearch'
                      , '/monetization/provider/list');

(check e.g. this: Angular UI-Router $urlRouterProvider .when not working when I click <a ui-sref="...">)

Angualar ui-router automatically changing route

1 Answers1