编辑：

Question

我想在用户导航离开我的应用程序中的某些页面之前警告用户并获得确认，例如撰写新的消息视图。我可以捕获哪些事件并取消/继续实现这一目标？

Answer 1

您应该处理$ locationChangeStart事件以挂接到查看转换事件，因此请使用此代码来处理控制器中的转换验证：

$scope.$on('$locationChangeStart', function( event ) {
  var answer = confirm("Are you sure you want to leave this page?")
  if (!answer) {
    event.preventDefault();
  }
}

你也可以使用这个指令angularjs-unsaved-changes，它比每个控制器编写它更可重用。

Answer 2

如果您说某个链接或按钮导航到其他路线或州，您只需显示确认导航的模式：

<a href="" ng-click="goToAnotherState()">Go Away...</a>

$scope.goToAnotherState = function(){

//show modal and get confirmating however your like
  if(modalResponse.Ok){
     $state.go('anotherState');
  }
}

另一种选择是在ui-router的$locationChangeStart事件中执行此操作，但如果您只在此处查看此内容，则第一种方法更好。 $locationChangeStart方法：

$rootScope.$on('$locationChangeStart', function (event, next, prev) {
  event.preventDefault();
  //show modal
  if(modalResponse.ok){
    var destination = next.substr(next.indexOf('#') + 1, next.length).trim();
    $location.path(destination)
  }
}

Answer 3

定义状态时，请使用onExit回调which is a transition hook：

在状态上声明的onEnter / onExit被处理为标准的转换挂钩。挂钩的返回值可能会更改过渡。

.state('foo', {
  //dont return a value else it the transition will wait on the result to resolve (Promise)
  onEnter: (MyService) => { MyService.doThing(); },

  //return false to cancel the transition; i.e. prevent user from leaving
  onExit: (MyService) => { return MyService.isSatisfied(); }
});

https://ui-router.github.io/ng1/docs/latest/interfaces/ng1.ng1statedeclaration.html#onexit

Answer 4

我认为最好使用它：

$scope.$on('$stateChangeSuccess', function(event, toState) {
    // check here
});

编辑：

这个答案是不正确的。

在导航到其他视图之前警告用户

4 个答案:

编辑：