web-dev-qa-db-ja.com

$ rootScope。$ on（ "$ routeChangeSuccess）または$ rootScope。$ on（" $ stateChangeSuccess）は、ui-router（AngularJS）を使用している場合は機能しません

アプリケーションのネストされたビューにUIルーターを使用していますが、同時にルートが変更されたときにイベントをリッスンしたいと考えています。 UIルーターを使用する前はrouteChangeSuccessは問題なく起動していましたが、ui-routerを使用した後は起動しません。ドキュメントでは、viewContedLoadedまたはstateChangeSuccessを使用することを提案していますが、それらも起動されません。コードスニペットを貼り付けています。どんな助けでもいただければ幸いです。

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();
}

  }]);


}]);
angularjsangular-ui-routerangular-routing
7
Karan Khanna

あなたのコードの2つのことが私には奇妙に見え、それが問題を引き起こしている可能性があります（それでも、私はあなたのコードの一部しか見ることができないので、私は間違っている可能性があります）。

  1. あなたがこれをしている方法：

    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ルーターの例が示すようにconfigブロックで状態を設定している場合は、これは必要ないようです。 このリンク を参照して、手順（5）までスクロールしてください。 （また、最後の2つのelse-ifステートメントのifステートメントに同じ句があるため、「$ state.go（ 'checkout'）;」は実行されません。）

  2. $ location.path（）に基づいてユーザーをさまざまな状態に送信するブロックは、リスナーを登録する場所より上にあるため、アプリは、リスナーを登録しようとしている行を実行していない可能性があります。リスナー登録をその大きなif/elseブロックの上に移動してみます。また、Phil Thomasがコメントで提案したことに同意します。他の問題により、$ stateChangeSuccessが妨げられる可能性があるため、少なくともリスナーが正しく登録されていることを確認するまで、$ stateChangeStartをリッスンする必要があります。

Edit：また、最近の編集を考えると、stateChangeStartリスナーは正しく見えません。リスナーを登録する方法は次のようになります。

$rootScope.$on('$stateChangeStart', 
function(event, toState, toParams, fromState, fromParams){ 
    // logic
})

また、リスナー内では、$ locationを使用せず、リスナーへの引数として指定されたもののみを使用してください。たとえば、toStateを見て、ユーザーがどこに行こうとしているのかを確認します。この理由は、遷移中のその関数内で、ユーザーがどこに行こうとしているのかを見つける必要がある一方で、$ locationはユーザーがすでにどこにいるかを教えてくれるからです。

9
Matt Metlis