问题
I am using UI-router for nested views in my application but at the sametime I want to listen for events when the route changes. Before using UI-router routeChangeSuccess was firing just fine but after ui-router it does not fire. Documentation suggests to use viewContedLoaded or stateChangeSuccess to be used but even they dont get fired. I am pasting my code snippet. Any help would be appreciated.
var app = angular.module('SmartKart', ['ngCookies','ngRoute','ui.bootstrap','angularPayments','ngAnimate','toaster','ui.router','LocalStorageModule']);
app.config(['$routeProvider','$httpProvider','$urlRouterProvider', '$stateProvider', function($routeProvider, $httpProvider,$urlRouterProvider,$stateProvider) {
$routeProvider
//TODO: Clean-up...most of these routes can be eliminated since we are now using nested views inside main.html. should probably use .otherwise(... main.html) or something
.when('/postal',
{
templateUrl: 'static/partials/landingPage.html',
requireLogin: false
})
.when('/register',
{
templateUrl:'static/partials/landingPage.html',
requireLogin: false
})
.when('/login',
{
templateUrl:'static/partials/landingPage.html',
requireLogin: false
})
.when('/forgot',
{
templateUrl:'static/partials/landingPage.html',
requireLogin: false
})
//TODO: Clean-up...most of these routes can be eliminated since we are now using nested views inside main.html
.when('/noregister',
{
templateUrl:'static/partials/landingPage.html',
requireLogin: false
})
.when('/contact',
{
templateUrl:'static/partials/contact.html'
})
.when('/home',
{
templateUrl:'static/partials/main.html',
requireLogin: true
})
.when('/productList', //so routeProvider will load main.html, stateProvider will load the product list nested view
{
templateUrl:'static/partials/main.html',
requireLogin: true
})
.when('/searchResults', //so routeProvider will load main.html, stateProvider will load the product list nested view
{
templateUrl:'static/partials/main.html',
requireLogin: true
})
.when('/products/:storeId',
{
templateUrl:'static/partials/main.html',
requireLogin: true
})
.when('/products/store/:storeId/department/:departmentId/aisle/:aisleId',
{
templateUrl:'static/partials/main.html',
requireLogin: true
})
// .when('/productDetail/:productId',
// {
// templateUrl:'static/partials/productDetail.html' ,
// requireLogin: true
// })
.when('/checkout',{
templateUrl:'static/partials/page.html',
requireLogin: true
})
.when('/jobrequest',{
templateUrl:'static/partials/driverJobRequest.html'
})
.when('/orders',{
templateUrl:'static/partials/page.html', //stateProvider will load the Orders list as a nested view within the main html
requireLogin: true
})
.when('/admin',{
templateUrl:'static/partials/main.html'
})
.when('/reset',{
templateUrl:'static/partials/resetPassword.html'
})
.when('/changePassword',{
templateUrl:'static/partials/changePassword.html',
requireLogin: false
})
.when('/driver/:orderNumber',{
templateUrl:'static/partials/main.html',
requireLogin: false
})
.when('/driver',{
templateUrl:'static/partials/main.html',
requireLogin: false
})
.when('/profilepage',{
templateUrl:'static/partials/profilePage.html',
requireLogin: false
})
.when('/', {
templateUrl : 'static/partials/landingPage.html',
requireLogin: false
});
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];
$httpProvider.defaults.withCredentials = true;
//Used for controlling nested views inside main.html and page.html
$stateProvider
.state('products', {
url: "/productList",
templateUrl: "static/partials/productList.html",
controller: 'ProductListCtrl'
})
.state('searchResults', {
url: "/searchResults",
templateUrl: "static/partials/searchResults.html",
controller: 'ProductSearchResultsCtrl'
})
.state('orders', {
url: "/orders",
templateUrl: "static/partials/orderList.html",
controller: 'UserOrderListCtrl'
})
.state('checkout', {
url: "/checkout",
templateUrl: "static/partials/checkout.html",
controller: 'checkoutCtrl'
})
.state('admin', {
url: "/admin",
templateUrl: "static/partials/admin.html",
controller: 'AdminCtrl'
})
.state('driver', {
url: "/driver",
templateUrl: "static/partials/driverDashboard.html",
controller: 'DriverDashboardCtrl'
})
.state('driverOrder', { //gets assigned order for this number
url: "/driver/:orderNumber",
templateUrl: "static/partials/singleOrder.html",
controller: 'OrderCtrl',
resolve: {
order: function($stateParams) {
return $stateParams.orderNumber;
}
}
});
}]);
app.run(['$rootScope', '$location' ,'$cookieStore', '$state', 'CacheManager', function($rootScope, $location, $cookieStore, $state,CacheManager){
//(re)load cached values here
//CacheManager.loadCache();
$rootScope.$on(['stateChangeStart', function(){
alert('hello1');
var urlCheck1 = $location.path() != '/forgot' && $location.path() != '/register' && $location.path() != '/postal' && $location.path() != '/';
var urlCheck2 = $location.path() != '/jobrequest';
if(urlCheck1 && urlCheck2){
if($cookieStore.get('userToken') == undefined){
$location.path('/login');
//seems insufficient to only check if the userToken is defined to go through here. we should check that it's == XCSRF token?
} else if($cookieStore.get('userToken') != undefined && ($location.path() == '/login' || $location.path() == '/')){
$location.path('/home');
}
}
if ($rootScope.cartItems.length > 0){
showCart();
}
}]);
}]);
回答1:
Two things in your code look odd to me, which could potentially be causing the problem (then again, since I'm only able to see some of your code, I could be wrong).
The way you're doing this:
if ($location.path() == '/orders'){ $state.go('orders'); } else if ($location.path() == '/admin'){ $state.go('admin'); } else if ($location.path() == '/productList'){ $state.go('products'); } else if ($location.path() == '/driver'){ $state.go('driver'); } else if ($location.path() == '/driverOrder/:orderNumber'){ $state.go('driverOrder'); } else if ($location.path() == '/driverOrder/:orderNumber'){ $state.go('checkout'); }It seems like that should not be necessary if you're setting up your states in the config block like the UI-router examples show - see this link and scroll down to step (5). (Also, your last two else-if statements have the same clause in the if statement, so the '$state.go('checkout');' will never be executed.)
Because that block where you're sending users to different states based on the $location.path() is above where you're registering the listener, your app may not even be executing the lines where you're trying to register the listener. I would try moving up the listener registration to above that big if/else block. Also, I agree with what Phil Thomas suggested in the comments, you should listen to $stateChangeStart at least until you're sure the listener is being registered properly, since other issues could prevent the $stateChangeSuccess.
Edit: Also, given your recent edits, your stateChangeStart listener does not look right. The way you're registering the listener should be like this:
$rootScope.$on('$stateChangeStart',
function(event, toState, toParams, fromState, fromParams){
// logic
})
Also, inside the listener, don't use $location, only use what you're given as arguments to the listener. For example look at toState to see where the user is trying to go. The reason for this is that inside that function, which is during a transition, you need to find out where the user is trying to go, while $location will tell you where the user already is.
来源：https://stackoverflow.com/questions/21470464/rootscope-onroutechangesuccess-or-rootscope-onstatechangesuccess-doe