如何使用 ui-router 1.0 防止 AngularJS 1.6 中的状态更改？

Question

我们如何使用$transitions取消状态更改以提示用户保存？以前的 ui-router 版本曾经在回调中有一个 event，可以用 event.preventDefault() 停止，但这个事件似乎已经消失了。

我在我的控制器中使用此代码：

var onTransitionStartOff = $transitions.onStart({}, function($transitions)
{
    if ($scope.itemTracker.hasChanged()) {
        $scope.itemTracker.askExitConfirm().then(function () {
            onTransitionStartOff();
            var toState = $transitions.$to();
            $state.go(toState);
        }, function () {});
        return $q.reject(null);
    }
    onTransitionStartOff();
});

效果很好，但由于承诺被拒绝，它在控制台中留下了一条错误消息。

我在stateService.ts里看了看，没看到什么有意思的东西...

Answer 1

我推荐using uiCanExit() on your controller

app.component('myComponent', {
  template: '<input ng-model="$ctrl.data" type="text">',
  bindings: { 'data': '<' },
  controller: function() {

    this.originalData = angular.copy(this.data);

    this.uiCanExit = function() {
      if (!angular.equals(this.data, this.originalData) {
        // Note: This could also return a Promise and request async
        // confirmation using something like ui-bootstrap $modal
        return window.confirm("Data has changed.  Exit anyway and lose changes?");
      }
    }
  }

这也可以处理异步代码（return 承诺）。

Answer 2

解决方案是，如果您想保持当前状态，则将 promise 设置为 false，如果您想导航到新状态，则设置为 true。

return $q.resolve(false);

如何使用 ui-router 1.0 防止 AngularJS 1.6 中的状态更改？

How to prevent state change in AngularJS 1.6 with ui-router 1.0?

javascript

transitions

angularjs

angular-ui-router

angularjs-1.6