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

Posted

技术标签:

【中文标题】$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

【讨论】:

以上是关于$stateChangeStart 删除最初启用的 event.preventDefault的主要内容,如果未能解决你的问题,请参考以下文章

angularjs 如何在页面没有登录的情况下阻止用户通过更改url进入页面--$stateChangeStart

ui-router中使用$stateChangeStart来实现WEB用户登录跳转

Angular Webpack ES2015 组件构建中未触发 angular-ui-router $stateChangeStart 事件

AngularJs Run块$ stateChangeStart未被触发

记一次AngularJs 路由 $stateChangeStart不起作用(细节决定成败)

当 UI-Router ES6 中的状态更改时,$stateChangeStart 不会被触发?