在不使用 $rootScope 的情况下使用 angular ui 路由器防止 stateChange

Question

我的用户可以离开状态，但在我想显示模式对话框之前 "Do you want to save?"

仅当用户数据变脏时才表示已更改。

我不想要的是将我的 EditController 中的 isDirty 属性粘贴到 $rootScope 转到 stateChangeStart 事件并在那里检查 isDirty，然后 show/not 保存对话框。

防止全局变量每本 javascript 初学者书籍...

1.) 那么在不侵入 $rootscope 的情况下防止状态更改的专业方法是什么？

2.) ui-router 是否有任何辅助库来增强 ui-router 在控制器内部提供函数挂钩以封装 ui 逻辑？

Answer 1

(1) 根据State Change Events下的docs

 $rootScope.$on('$stateChangeStart', 
      function(event, toState, toParams, fromState, fromParams){ 
          event.preventDefault(); 
          // transitionTo() promise will be rejected with 
          // a 'transition prevented' error
 })

您可以在适当且有效的地方将 $rootScope 更改为 $scope。

在将自定义数据附加到状态对象下，您可以传递自定义数据。

(2) 我不确定您在问什么，但 factories/services/providers 确实有帮助。

Answer 2

虽然在撰写本文时它不是稳定版本的一部分，但 UI-路由器的 1.0 版本将使用 onEnter/onExit 的 return 值来防止导航。

见GitHub issue 2219

Answer 3

使用 $transitions.onStart (angular-ui-router 1.0.0-rc) 你可以 return 一个布尔值。如果 false 转换将被取消。

$transitions.onStart({}, function (trans) { 
    var answer = confirm("Want to leave this page?")
    if (!answer) {
        return false;
    }
});

这是文档：https://ui-router.github.io/ng1/docs/latest/modules/transition.html#hookresult

在不使用 $rootScope 的情况下使用 angular ui 路由器防止 stateChange

Prevent a stateChange with angular ui router without using $rootScope

angularjs

angular-ui-router