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

【问题标题】：How to prevent state change in AngularJS 1.6 with ui-router 1.0?如何使用 ui-router 1.0 防止 AngularJS 1.6 中的状态更改？
【发布时间】：2026-02-16 19:50:02
【问题描述】：

我们如何使用$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();
});

效果很好，但由于 promise 被拒绝，它会在控制台中留下错误消息。

查看了stateService.ts，但没有看到一些有趣的东西……

【问题讨论】：

在*.com/questions/39931983/…查看我的建议

标签： javascript angularjs angular-ui-router transitions angularjs-1.6

【解决方案1】：

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

return $q.resolve(false);

【讨论】：

返回 false 或 null 有效，但它会向控制台打印错误，这就是我要避免的
对不起，我读得太快了，诀窍是解决而不是拒绝承诺。谢谢！

【解决方案2】：

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?");
      }
    }
  }

这也可以处理异步代码（返回一个承诺）。

【讨论】：