因此,我使用第三方库来处理身份验证,并且在注销功能中调用$location.url('/login')

但是,在我的应用程序模块中,我试图根据当前路线更改一些CSS。执行此操作的函数如下所示:

app.run(function ($rootScope, $route) {
$rootScope.$on("$routeChangeSuccess", function(currentRoute, previousRoute){
    //Change page css, based on Route information
    $rootScope.isLogin = {
        status: $route.current.$$route.isLogin.status
    };
});
});


在我的配置中,我还基于ngRoute指定了一些路由,并带有一个参数,该参数告诉我当前页面是否为登录页面。

    $routeProvider.
    when('/route1', {
        templateUrl: './partials/route1.html',
        controller: 'Route1Ctrl',
        isLogin: { status: false }
    }).
    when('/login', {
        templateUrl: './partials/login.html',
        controller: 'AuthCtrl',
        isLogin: { status: true }
    }).
    otherwise({
        redirectTo: '/login'
    });


现在,每当我调用注销函数时,我都会收到一个类型错误:Cannot read property 'isLogin' of undefined,它基本上告诉我$route.current.$$route.isLogin.status未设置。考虑到我正在使用事件$ routeChangeSuccess,所以我不明白为什么尚未设置它。

有人可以看到我在哪里做错了吗?

最佳答案

实际上,'isLogin' of undefined表示$$routeundefined。您不应使用以$$开头的属性,因为它们是Angular的内部属性。在路线上定义isLogout后,可以直接通过$route.current.isLogout访问它。

的JavaScript

angular.module('app',['ngRoute']).
  config(['$routeProvider', function($routeProvider) {
    $routeProvider.
      when('/route1', {
        template: '<h1>Template 1</h1>',
        isLogin: { status: false }
      }).
      when('/route2', {
        template: '<h1>Template 2</h1>',
        isLogin: { status: true }
      }).
      otherwise({
        redirectTo: '/route1'
      });
  }]).
  run(['$rootScope', function($rootScope) {
    $rootScope.$on("$routeChangeSuccess", function(event, currentRoute, previousRoute){
      if(!currentRoute.redirectTo) { // <= "otherwise" is a route as well, so $routeChangeSuccess is also triggered. However, it does not have `isLogin` property, so filter out this case.
        $rootScope.isLogin = {
          status: currentRoute.isLogin.status
        };
      }
    });
  }]);


柱塞:http://plnkr.co/edit/R4DSz7kV56zpM9EXpNLm?p=preview

编辑:

$routeChangeSuccess事件的处理程序接收当前路由作为第二个参数。这意味着您可以像currentRoute.isLogin一样直接使用它,而不是将$route服务注入run块并像$route.current.isLogin那样使用它。

应该提到的另一件事是otherwise的配置中的$routeProvider也是一条路由。因此,如果路由器将新的当前路由解析为otherwise时,也会触发$routeChangeSuccess事件(实际上将触发两次):第一次触发otherwise路由,第二次触发重定向到的路由。由于otherwise路由没有isLogin属性,因此您应在尝试访问currentRoute.isLogin之前过滤掉这种情况。

09-25 16:17