Maxime B Maxime B - 6 months ago 38
AngularJS Question

Changing state does nothing

I'm trying to go back at a sibling state, as I did a lot of times in my Ionic app. But this time it just doesn't want to do it.

Here's where I'm calling the

$state
:

dataProvider.custom('/api/cats/' + catId + '/',
{
method: 'PUT',
data: data,
headers: {
'Content-Type': undefined
},
transformRequest: function (data, headersGetter) {
var formData = new FormData();
angular.forEach(data, function (value, key) {
formData.append(key, value);
});
headers = headersGetter();
delete headers['Content-Type'];
return formData;
}
})
.then(function (resp) {
$state.go('^.cat', {'cat': catId});
});


And here are my states :

$stateProvider
.state('login', {
url: '/login',
templateUrl: 'templates/login.html'
})
.state('menu', {
url: '/menu',
abstract: true,
templateUrl: 'templates/main.html',
onEnter: function($state, Auth){
if(!Auth.isLoggedIn()) {
$state.go('login');
}
}
})
.state('menu.home', {
url: '/devel',
views: {
'menuContent': {
templateUrl: 'templates/devel.html',
}
}
})
.state('menu.catspad', {
url: '/catspad',
views: {
'menuContent': {
templateUrl: 'templates/catspad.html',
controller: 'CatspadCtrl',
}
}
})

.state('menu.cats', {
url: '/cats',
views: {
'menuContent': {
templateUrl: 'templates/cats.html',
controller: 'CatsCtrl',
resolve: {
items: ['dataProvider', function (dataProvider) {
return dataProvider.fetch('/api/cats/')
}]
}
}
}
})
.state('menu.cat', {
url: '/cat/view/{cat:int}',
views: {
'menuContent': {
templateUrl: 'templates/cat.html',
controller: 'CatDetailCtrl',
resolve: {
items: ['dataProvider', '$stateParams', function(dataProvider, $stateParams) {
return dataProvider.fetch('/api/cats/' + $stateParams.cat + '/detail/');
}]
}
}
}
})

.state('menu.catAddChange', {
url: '/cat/addchange?cat',
views: {
'menuContent': {
templateUrl: 'templates/catAddChange.html',
controller: 'CatAddChangeCtrl',
resolve: {
items: ['dataProvider', '$stateParams', function(dataProvider, $stateParams)
{
if ($stateParams.cat) {
return dataProvider.fetch('/api/cats/' + $stateParams.cat + '/detail/')
}}]
}
}
}
})

.state('menu.me', {
url: '/me',
views: {
'menuContent': {
templateUrl: 'templates/account.html',
controller: 'AccountCtrl',
}
}
})
.state('register', {
url: '/register',
templateUrl: 'templates/register.html'
});
$urlRouterProvider.otherwise('/menu/cats');
$ionicConfigProvider.views.transition("none");


Relevant HTML :

main.html (abstract state)

<ion-nav-view name="menuContent" class="customViewStyle"></ion-nav-view>


catAddChange.html :

<ion-view view-title="Change or add a cat" class="animated slideInUp">


Everything works fine everywhere but here... What's happening?

Answer

The error was on the type of the parameter given to the menu.cat state.

After debugging with typeof, the catId type was string, therefore not accepted by the state since it was expecting an int...

To summerize, I needed to ensure the parameter's type is as the state expects (int here). It will not work if it receives "1" (string) instead of 1(number), without any error at all.

Was hard to find this, hope this will help.

Comments