Question

我有一个使用UI-Router和嵌套视图构建的angularjs单页面应用程序。我的代码如下所示：

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

在“home”状态下，我正在决定查看传入的身份验证密钥是否有效。

如果密钥无效或已过期，$stateChangeError事件会捕获错误并将用户重定向到错误页面。

这在应用程序启动和刷新时工作正常。

问题是，当密钥已过期（仅有效十分钟）并且应用程序未被重新启动时， $stateChangeError事件未捕获错误消息。

有关如何解决此问题的任何想法？

Answer 1

您可以使用由角度js提供的$ watch来解决此问题。

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

第一个函数是值函数，第二个函数是监听器函数。此示例值函数返回$ scope变量scope.data.myVar。如果此变量的值发生更改，将返回不同的值，AngularJS将调用侦听器函数。

我认为这可能会解决您的问题...

Angular UI路由器，解析嵌套视图

1 个答案: