【发布时间】：2014-01-31 00:36:09
【问题描述】：
我在我的应用程序中为嵌套视图使用 UI-router，但同时我想在路由更改时监听事件。在使用 UI-router routeChangeSuccess 之前触发很好，但在 ui-router 之后它不会触发。文档建议使用 viewContedLoaded 或 stateChangeSuccess，但即使它们也不会被解雇。我正在粘贴我的代码 sn-p。 任何帮助将不胜感激。
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();
}
}]);
}]);
【问题讨论】：
-
我被标题弄糊涂了。你在听“$routeChangeSuccess”还是“stateChangeSuccess”？在您提供的代码中，您使用 ui-router 来加载状态，但会监听在这种情况下永远不会触发的本机路由器事件。
-
我也尝试使用 stateChangeSuccess。但它似乎不起作用。
-
另外，请确保 实际上 调用了“$stateChangeSuccess”。考虑到如果加载精确状态时出现问题，则会调用“$stateChangeError”。所以也许你应该听的是'$stateChangeStart'。
-
我也尝试过收听 stateChangeStart，但似乎有效。 :(
-
有谁知道这个问题的解决方案，我真的很困惑，需要帮助！！
标签： angularjs angular-ui-router angular-routing