$rootScope.$on("$routeChangeSuccess) 或 $rootScope.$on("$stateChangeSuccess) 在使用 ui-router(AngularJS) 时不起作用 [英] $rootScope.$on("$routeChangeSuccess) or $rootScope.$on("$stateChangeSuccess) does not work when using ui-router(AngularJS)
问题描述
我在我的应用程序中将 UI-router 用于嵌套视图，但同时我想在路由更改时侦听事件.在使用 UI-router routeChangeSuccess 之前，它触发得很好，但在 ui-router 之后它不会触发.文档建议使用 viewContedLoaded 或 stateChangeSuccess 来使用，但即使它们也不会被解雇.我正在粘贴我的代码片段.任何帮助将不胜感激.
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();
}
}]);
}]);
推荐答案
你的代码中的两件事对我来说看起来很奇怪，这可能会导致问题(再说一次，因为我只能看到你的一些代码，我可能错了).
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');
}
如果您像 UI-router 示例所示那样在配置块中设置状态，则似乎没有必要这样做 - 请参阅 此链接 并向下滚动到步骤 (5).(此外，您的最后两个 else-if 语句在 if 语句中具有相同的子句，因此永远不会执行 '$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.)
因为您根据 $location.path() 将用户发送到不同状态的块位于您注册侦听器的位置上方，所以您的应用程序甚至可能不会执行您所在的行尝试注册侦听器.我会尝试将侦听器注册移到那个大的 if/else 块之上.另外，我同意 Phil Thomas 在评论中的建议，您应该至少在确定侦听器已正确注册之前收听 $stateChangeStart，因为其他问题可能会阻止 $stateChangeSuccess.
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.
编辑:此外，鉴于您最近的编辑，您的 stateChangeStart 侦听器看起来不正确.你注册监听器的方式应该是这样的:
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
})
另外，在监听器内部，不要使用 $location，只使用你提供给监听器的参数.例如查看 toState 以查看用户试图去哪里.这样做的原因是在该函数中，在转换期间，您需要找出用户试图去哪里，而 $location 会告诉您用户已经在哪里.
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.
这篇关于$rootScope.$on("$routeChangeSuccess) 或 $rootScope.$on("$stateChangeSuccess) 在使用 ui-router(AngularJS) 时不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
