Предотвращение изменения состояния с помощью angular ui router без использования $rootScope

Мой пользователь может оставить состояние, но прежде, чем я хочу показать модальный диалог "Вы хотите сохранить?"

ТОЛЬКО, если пользовательские данные загрязнены, что означает изменение.

То, что я НЕ хочу, - это вставить свойство isDirty в свой EditController в $rootScope перейти к событию stateChangeStart и проверить там, что isDirty, а затем показать/не диалог сохранения.

Предотвратить глобальные переменные говорит каждая начинающая книга javascript...

1.) Что тогда является про-способ предотвратить изменение состояния без взлома корневого $?.

2.) Существуют ли какие-либо вспомогательные библиотеки для ui-router, которые улучшают функции функции ui-router, предлагающие функции внутри контроллера для инкапсуляции логики ui?

Ответ 1

(1) В соответствии с docs в разделе События изменения состояния

 $rootScope.$on('$stateChangeStart', 
      function(event, toState, toParams, fromState, fromParams){ 
          event.preventDefault(); 
          // transitionTo() promise will be rejected with 
          // a 'transition prevented' error
 })

Вы можете изменить $rootScope на $scope везде, где это необходимо и работает.

В разделе Прикрепить пользовательские данные к объектам состояния, вы можете передать пользовательские данные.

(2) Я не уверен, что вы просите, но фабрики/службы/провайдеры действительно помогут.

Ответ 2

Используя $transitions.onStart(angular -ui-router 1.0.0-rc), вы можете вернуть логическое значение. Если false, переход будет отменен.

$transitions.onStart({}, function (trans) { 
    var answer = confirm("Want to leave this page?")
    if (!answer) {
        return false;
    }
});

Вот документация: https://ui-router.github.io/ng1/docs/latest/modules/transition.html#hookresult

Ответ 3

Хотя на момент написания это не является частью стабильного выпуска, версия 1.0 UI-маршрутизатора будет использовать возвращаемое значение onEnter/onExit, чтобы предотвратить навигацию.

См. GitHub issue 2219