Как предотвратить изменение состояния в AngularJS 1.6 с помощью ui-router 1.0?

Как мы можем использовать $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, но ничего интересного не увидел...


javascript angularjs angular-ui-router transitions angularjs-1.6
person Robin Thoni    schedule 22.01.2017    source источник
comment
Ознакомьтесь с моим предложением по адресу stackoverflow.com/questions/39931983/   -  person Artem K.    schedule 27.01.2017

Ответы (2)


arrow_upward
2
arrow_downward

Решение состоит в том, чтобы разрешить промис со значением false, если вы хотите остаться в текущем состоянии, или со значением true, если вы хотите перейти к новому состоянию.

return $q.resolve(false);
person Abhijeet    schedule 07.07.2017
comment
Возврат false или null работает, но выводит ошибку на консоль, этого я пытаюсь избежать - person Robin Thoni; 08.07.2017
comment
Извините, я прочитал слишком быстро, хитрость заключалась в том, чтобы разрешить, а не отклонить обещание. Спасибо! - person Robin Thoni; 14.07.2017

arrow_upward
1
arrow_downward

Я рекомендую использовать 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?");
      }
    }
  }

Это также может обрабатывать асинхронный код (вернуть обещание).

person Chris T    schedule 23.01.2017