Угловой UI-маршрутизатор, разрешающий вложенные виды

Question

У меня есть одностраничное приложение, созданное в angularjs, с использованием UI-Router и вложенных представлений. Мой код выглядит следующим образом:

app.config(['$stateProvider', '$urlRouterProvider', '$httpProvider' ,'$mdDateLocaleProvider', '$locationProvider', function ($stateProvider, $urlRouterProvider, $httpProvider, $mdDateLocaleProvider, $locationProvider) { 
var rootpath = config.paths.components; 
$stateProvider.state('home', { 
    url: '/', 
    views: { 
     index: { 
      templateUrl: rootpath + '_root/template.html', 
      controller: "RootController" 
     }, 
     "header@home": { 
      templateUrl: rootpath + 'header/header-template.html', 
      controller: "HeaderController" 
     }, 
     "sidebar@home": { 
      templateUrl: rootpath + 'sidebar/sidebar-template.html', 
      controller: "SidebarController" 
     }, 
     "main@home": { 
      templateUrl: rootpath + 'main/main-template.html', 
      controller: "MainController" 
     } 
    }, 
    resolve: { 
     authorize: ['RootService', function (RootService) { 
     var auth = RootService.getKey(); 
     return RootService.getConfig(auth.key); 
     }] 
    }, 
}); 

$urlRouterProvider.otherwise('/'); 

}]).run(['$rootScope', '$state', '$window', function($rootScope, $state, $window){ 
    $rootScope.$on('$stateChangeError', function(event, toState, toParams, fromState, fromParams, error){ 
    $window.location = error.status +'.html'; 
}); 

В «домашнем» состоянии, я делаю решимость, чтобы увидеть, если ключ аутентификации передается в действителен.

Если ключ недействителен или истек, событие $stateChangeError вызывает ошибку и перенаправляет пользователя на страницу с ошибкой.

Это нормально работает, когда приложение запускается и обновляется.

Проблема в том, когда срок действия ключа истек (действует только в течение десяти минут), и приложение не передислоцировано, событие $stateChangeError не обнаруживает сообщение об ошибке.

Любые мысли о том, как исправить это?

Answer 1

Вы можете решить эту проблему, используя $ watch, предоставленные угловыми js.

$scope.$watch(function(scope) { return scope.data.myVar }, 
      function() {} 
     ); 

Первая функция - функция значения, а вторая функция - функция слушателя. Эта примерная функция значения возвращает переменную $ scope.data.myVar. Если значение этой переменной изменится, будет возвращено другое значение, и функция AngularJS вызовет функцию прослушивателя.

Я думаю, что это может решить вашу проблему ...