Question

我阻止用户转到另一个页面做这样的事情，但是，当我需要进入我最初阻止的页面时，我收到错误"transition prevented”。

如何删除原始预防并允许页面继续？我试图返回false而不是event.preventDefault，但它没有用。有什么帮助吗？

$rootScope.$on($stateChangeStart, function(e, toState, toParams, fromState, fromParams) {
    if (isCurrentPageCompleted === false) {
        e.preventDefault();
    } 
});

Answer 1

第一种方法

如果我们想要允许用户转到某个页面，只有加载了一些数据，我们才能使用 resolve

.state("prevented", {
    ...
    resolve: {
        someKey : { // promise, which once resolved 
                    // - then it will allow state transition                   
                    // function() { return ... }
                  }
    }
}

第二种方法

但是，如果我们想要重定向用户，在满足某些条件之前，我们可以使用一些全局服务。 a working plunker 。

.factory("BreakTransition", function(){
  return { 
    ShouldWaitGlobally : true, 
  } 
})

然后我们可以有一些状态。

一个是默认值，用于重定向（'home'）。
在启用全局转换（'prevented'）
一个可能是启用者（'enabler'）

.state（'home'，{ url：“/ home”， templateUrl：'tpl.html'， }） .state（'enabler'，{ url：“/ enabler”， templateUrl：'tpl.enabler.html'， controller：“EnablerController”， }） .state（'prevent'，{ url：“/ prevent”， templateUrl：'tpl.html'，数据：{ ShouldWaitForCompletion：是的， }， }）

现在，在工厂价值发生变化之前，我们可以使用这个“休息”

.run(['$rootScope', '$state', 'BreakTransition',
  function ($rootScope, $state, BreakTransition) {

  $rootScope.$on('$stateChangeStart', function(e, toState, toParams 
                                            , fromState, fromParams) {
    var shouldNotWait = toState.name === "home"
    if(shouldNotWait)
    {
      return;
    }

    var isCurrentPageCompleted = BreakTransition.ShouldWaitGlobally !== true
        || (toState.data || {}).ShouldWaitForCompletion !== true;


    if (isCurrentPageCompleted === true) {
      return;
    } 

    e.preventDefault(); 
    $state.go('home');

  });
}])

检查all in action here

$ stateChangeStart删除最初启用的event.preventDefault

1 个答案: