Look in your controllers for a $state.go()
that is sending you to the state you're already in immediately after the state loads. Doing this will cause the behavior you're seeing.
ui-router not changing url in address bar
-
10-07-2023 - |
Question
When I click the emails button it should load the emails page and change the url to /emails
.
When I click the texts button it should load the texts page and change the url to /texts
.
What is actually happening though the email works fine, but when I click on the texts button the correct ctrl and view is loaded and works BUT my address bar keeps the last url I was on instead of changing to the text url.
My application works fine, but I have no idea what is causing this.
When I enter the url manually and hit enter the correct view and ctrl are loaded as expected, but when I click another link and then click the texts link my address bar has the last url still in it.
GOOD
The URL is wrong it should have /texts
.
Email Module Code
/emails/emails.js
angular.module('rmc.contact.emails', [
'rmc.contact.emails.create',
'rmc.contact.emails.edit',
'rmc.contact.emails.preview',
'rmc.contact.emails.view'
])
.config(['$stateProvider', function($stateProvider) {
$stateProvider
.state('rmc.contact.emails', {
url: '/emails',
controller: 'EmailsCtrl',
templateUrl: '/apps/rmc/contact/emails/emails.tpl.html'
});
}])
/emails/create/create.js
angular.module('rmc.contact.emails.create', [])
.config(['$stateProvider', function($stateProvider) {
$stateProvider
.state('rmc.contact.emails.create', {
url: '/create?cardId',
controller: 'EmailsCreateCtrl',
templateUrl: '/apps/rmc/contact/emails/create/create.tpl.html'
});
}])
Text Module Code
/contact/texts/texts.js
angular.module('rmc.contact.texts', [
'rmc.contact.texts.create',
'rmc.contact.texts.edit',
'rmc.contact.texts.preview',
'rmc.contact.texts.view'
])
.config(['$stateProvider', function($stateProvider) {
$stateProvider
.state('rmc.contact.texts', {
url: '/texts',
controller: 'TextsCtrl',
templateUrl: '/apps/rmc/contact/texts/texts.tpl.html'
});
}])
/contact/texts/create/create.js
angular.module('rmc.contact.texts.create', [])
.config(['$stateProvider', function($stateProvider) {
$stateProvider
.state('rmc.contact.texts.create', {
url: '/create',
controller: 'TextsCreateCtrl',
templateUrl: '/apps/rmc/contact/texts/create/create.tpl.html'
});
}])
The menu links
/contact/contact.tpl.html
<div class='three-full-btns'>
<a ui-sref='rmc.contact.calls.create({ cardId: 0 })' ng-if="hasPermission('rmc.calls')" title='Calls' class='btn'>
<i class='icon-phone'></i>
</a>
<a ui-sref='rmc.contact.emails.create({ cardId: 0 })' ng-if="hasPermission('rmc.emails')" title='Emails' class='btn'>
<i class='icon-envelope'></i>
</a>
<a ui-sref='rmc.contact.texts.create' ng-if="hasPermission('rmc.texts')" title='Texts' class='btn'>
<i class='icon-mobile-phone'></i>
</a>
</div>
<div class='three-full-btns'>
<a ui-sref='rmc.contact.systems.create({ cardId: 0 })' title='Systems' ng-if="hasPermission('rmc.systems')" class='btn'>
<i class='icon-ok'></i>
</a>
<a ui-sref='rmc.contact.forms.create({ cardId: "" })' ng-if="hasPermission('rmc.forms')" title='Forms' class='btn'>
<i class='icon-file-text'></i>
</a>
<a ui-sref='rmc.contact.columns.view({ cardId: "" })' ng-if="hasPermission('rmc.columns')" title='Column Forms' class='btn'>
<i class='icon-columns'></i>
</a>
</div>
Solution
OTHER TIPS
I think you should explicity declare params in text route, otherwise ui-router does NOT view the param
url: '/texts?cardId'
https://github.com/angular-ui/ui-router/wiki/URL-Routing#important-stateparams-gotcha
May be problem here:
<a ui-sref='rmc.contact.texts.create({ cardId: 0 })'
...
url: '/create',
You missed ?cardId