This is a mon issue, I see it a ton but nothing seems to work. Here is what I'm doing. I want to have some dynamic animations with my states, so basically login will do some cool animations and move into the actual interface. Now, I started nesting the views like this:
$stateProvider
.state('login', {
url: '/login',
title: "Login",
views: {
"master": {
controller: "LoginController",
templateUrl: "/ponents/login/login.html",
authentication: false
}
}
})
.state("logout", {
url: "/logout",
title: "Logout",
authentication: false
})
.state('foo', {
url: '/',
controller: "HomeController",
views: {
"master": {
templateUrl: '/ponents/ui-views/masterView.html'
},
"sidebar@foo": {
templateUrl: '/ponents/sidebar/_sidebar.html'
},
"header@foo": {
templateUrl: '/ponents/header/_header.html'
}
}
})
.state('foo.inventory', {
url: '/inventory',
title: "Inventory",
views: {
"content@foo": {
controller: "InventoryController",
templateUrl: "/ponents/inventory/inventory.html"
}
}
});
So while running this I need to redirect to logout, but it gets stuck. It won't move from this logout state at all. Here is how I'm handling that:
function run($http, $rootScope, $cookieStore, $state, $templateCache, $timeout, AuthService, modalService, const) {
var timeout;
FastClick.attach(document.body);
$rootScope.globals = $cookieStore.get('globals') || {};
if ($state.current.name !== 'login' && !$rootScope.globals.guid) {
$state.go('login');
} else if ($state.current.name == 'login' && $rootScope.globals.guid) {
$state.go('foo');
}
$rootScope.$on('$stateChangeStart', function (event, next, current, fromState, fromParams) {
var authorizedRoles = next.level != undefined ? next.level : 1,
needAuth = next.authentication != undefined ? next.authentication : true;
if (needAuth) {
if (!AuthService.isAuthorized(authorizedRoles, true)) {
event.preventDefault();
if (AuthService.isAuthenticated()) {
$rootScope.$broadcast(const.auth.notAuthorized);
$state.go('foo', {});
} else {
$rootScope.$broadcast(const.auth.notAuthenticated);
}
}
}
if (next.name == 'logout') AuthService.logout($rootScope.globals);
});
}
So why would this not work? It seems like this work fine. But the $state.go('login') returns a bad value.
If anyone could guide me in the right direction, or tell me what is wrong exactly.
This is a mon issue, I see it a ton but nothing seems to work. Here is what I'm doing. I want to have some dynamic animations with my states, so basically login will do some cool animations and move into the actual interface. Now, I started nesting the views like this:
$stateProvider
.state('login', {
url: '/login',
title: "Login",
views: {
"master": {
controller: "LoginController",
templateUrl: "/ponents/login/login.html",
authentication: false
}
}
})
.state("logout", {
url: "/logout",
title: "Logout",
authentication: false
})
.state('foo', {
url: '/',
controller: "HomeController",
views: {
"master": {
templateUrl: '/ponents/ui-views/masterView.html'
},
"sidebar@foo": {
templateUrl: '/ponents/sidebar/_sidebar.html'
},
"header@foo": {
templateUrl: '/ponents/header/_header.html'
}
}
})
.state('foo.inventory', {
url: '/inventory',
title: "Inventory",
views: {
"content@foo": {
controller: "InventoryController",
templateUrl: "/ponents/inventory/inventory.html"
}
}
});
So while running this I need to redirect to logout, but it gets stuck. It won't move from this logout state at all. Here is how I'm handling that:
function run($http, $rootScope, $cookieStore, $state, $templateCache, $timeout, AuthService, modalService, const) {
var timeout;
FastClick.attach(document.body);
$rootScope.globals = $cookieStore.get('globals') || {};
if ($state.current.name !== 'login' && !$rootScope.globals.guid) {
$state.go('login');
} else if ($state.current.name == 'login' && $rootScope.globals.guid) {
$state.go('foo');
}
$rootScope.$on('$stateChangeStart', function (event, next, current, fromState, fromParams) {
var authorizedRoles = next.level != undefined ? next.level : 1,
needAuth = next.authentication != undefined ? next.authentication : true;
if (needAuth) {
if (!AuthService.isAuthorized(authorizedRoles, true)) {
event.preventDefault();
if (AuthService.isAuthenticated()) {
$rootScope.$broadcast(const.auth.notAuthorized);
$state.go('foo', {});
} else {
$rootScope.$broadcast(const.auth.notAuthenticated);
}
}
}
if (next.name == 'logout') AuthService.logout($rootScope.globals);
});
}
So why would this not work? It seems like this work fine. But the $state.go('login') returns a bad value.
If anyone could guide me in the right direction, or tell me what is wrong exactly.
Share Improve this question edited Jan 29, 2015 at 20:02 Mike Huebner asked Jan 29, 2015 at 7:11 Mike HuebnerMike Huebner 6691 gold badge10 silver badges23 bronze badges 8- just try window.location.hash="#login"; instead of $state.go('login') .. – Asik Commented Jan 29, 2015 at 7:20
- That just hashes login at the end of the URL, doesn't do what I need it to do. – Mike Huebner Commented Jan 29, 2015 at 7:39
- There is lot of parts missing, e.g. the $rootScope.globals.guid, or the if before $rootScope.$on is called where?... the best would be to reproduce the issue with some plunker, or share all the stuff. – Radim Köhler Commented Jan 29, 2015 at 12:33
-
It is getting in the
$state.go('login');but the actual call returns:value: Error: transition supersededfor some reason. No idea why. Even with $location.path('/login'); it doesn't work. – Mike Huebner Commented Jan 29, 2015 at 19:13 - @MikeHuebner where is $state.go exactly ? what is the wrapper function of your whole code? – levi Commented Jan 29, 2015 at 19:25
4 Answers
Reset to default 7The issue is that the $state.go is in the run, there doesn't seem to be many docs on this topic. $state.go is not initialized yet and will not run.
I had the same problem. After debugging into how the attribute ui-sref works for hyperlinks, i found out that the $state.go is wrapped around $timeout in the core angular-ui library.
var transition = $timeout(function() {
debugger;
$state.go("app.authentication");
});
Perhaps you could try the same. (Although the ui-sref event handler in the core library clearly mentions that this is a hack.)
只需要升级ui-router版本就可以了，见连接地址：https://github./mattlewis92/angular-bluebird-promises/issues/11
If you upgrade to ui-router 0.3.2 it's actually been fixed there: angular-ui/ui-router@66ab048
I have faced this issues in my app, you are trying to call $state.go on an internal ui-view that is not relative to the state ,thats you are facing this problem, so try this :
app.run(['$state', '$rootScope', '$timeout',
function ($state, $rootScope, $timeout) {
$timeout(function() {
$state.go('login');
});
}]);