javascript - AngularJS - 需要 $routeChangeStart 和 $locationChangeStart 的某种组合

标签 javascript angularjs routes angularjs-directive angularjs-routing

我的问题实际上与此处发现的问题非常相似:

AngularJs - cancel route change event

简而言之,我正在使用 $routeChangeStart 并尝试使用 $location 更改当前路线。当我这样做时,控制台显示原始页面仍在加载,并很快被新页面覆盖。

提供的解决方案是使用 $locationChangeStart 而不是 $routeChangeStart,这应该可以防止额外的重定向。不幸的是,我在 $routeprovider 中使用了更改路线时需要访问的附加数据(我用它来跟踪页面限制)。这是一个例子...

$routeProvider.
    when('/login', { controller: 'LoginCtrl', templateUrl: '/app/partial/login.html', access: false}).
    when('/home', { controller: 'HomeCtrl', templateUrl: '/app/partial/home.html', access: true}).
    otherwise({ redirectTo: '/login' });


$rootScope.$on('$routeChangeStart', function(event, next, current) {
    if(next.access){
        //Do Stuff
    }
    else{
        $location.path("/login");
        //This will load the current route first (ie: '/home'), and then
        //redirect the user to the correct 'login' route.
    }
});

通过 $routeChangeStart,我可以使用“next”和“current”参数(请参阅 AngularJS - $route )作为对象来检索我的“访问”值。对于 $locationChangeStart,这两个参数返回 url 字符串,而不是对象。所以似乎没有办法检索我的“访问”值。

有什么方法可以将 $locationChangeStart 的重定向阻止能力与 $routeChangeStart 的对象灵 active 结合起来来实现我的需要吗?

最佳答案

我想到的一种方法是尝试使用解析参数来实现此目的:

var resolver = function(access) {
  return {
    load: function($q) {
      if (access) { // fire $routeChangeSuccess
        var deferred = $q.defer();
        deferred.resolve();
        return deferred.promise;
      } else { // fire $routeChangeError
        return $q.reject("/login");
      }
    }
  }
}

$routeProvider.
  when('/login', { controller: 'LoginCtrl', templateUrl: '/app/partial/login.html', resolve: resolver(false)}).
  when('/home', { controller: 'HomeCtrl', templateUrl: '/app/partial/home.html', resolve: resolver(true)}).
  otherwise({ redirectTo: '/login' });

请注意,我尚未测试上面的代码,但我在我的项目中做了类似的事情。

关于javascript - AngularJS - 需要 $routeChangeStart 和 $locationChangeStart 的某种组合,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17978990/

相关文章:

javascript - 如何将项目添加到 Highcharts 图例?

javascript - 为什么标签的颜色没有改变?

javascript - 如何将计时器值格式更改为 MM :Sec from fixed counter in angular js

ruby-on-rails - 资源的匹配和动词等价物是什么?

javascript - 延迟 globalTick() JS 中每个 Sprite 的 tick()

php - 在angularjs Controller 中的函数内调用函数

javascript - 在多个元素上使用 TweenMax

angularjs - 在 Angular2 中创建包装器组件

ios - 计算完成Apple Maps旅程所需的时间

ruby-on-rails - 可安装引擎中非标准 Assets 的 Rails 路由