javascript - 如何使用 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

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

return $q.resolve(false);

Answer 2

我建议在您的控制器上使用uiCanExit()

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

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