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

Posted 2023-05-09

【中文标题】$stateChangeStart 删除最初启用的 event.preventDefault

【英文标题】：$stateChangeStart remove event.preventDefault that was originally enabled

【发布时间】：2015-04-29 11:34:13

【问题描述】：

我正在阻止用户转到另一个页面执行类似的操作，但是，当需要继续访问我最初阻止的页面时，我收到错误 "transition prevented”。

如何删除原来的阻止并允许页面继续？我试图返回 false 而不是 event.preventDefault 但它没有用。请问有什么帮助吗？

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

【参考方案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('家', 网址：“/家”， templateUrl: 'tpl.html', ) .state('启动器', 网址：“/启用”， templateUrl: 'tpl.enabler.html', 控制器：“启动器控制器”， ) .state('阻止', 网址：“/阻止”， templateUrl: 'tpl.html', 数据 ： 应该WaitForCompletion：真， , )

而现在，在出厂值改变之前，我们可以使用这个“break”

.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