Подтвердить что ты не робот

Страница выхода AngileJS ui-route

Мне нужна возможность спросить у пользователя, покидает ли он страницу. Я читал, что это будет возможность, но событие будет запущено, когда я войду на страницу, а не когда я покину страницу. onExit, но это событие я должен определить в....routes.js, и мне нужен доступ к свойствам и функциям контроллера. Есть ли событие, которое вызывается выходом страницы?

$scope.$on('$locationChangeStart', function( event ) {
        var answer = confirm("Are you sure you want to leave this page?")
        if (!answer) {
            event.preventDefault();
        }
    });

Ответ 1

Это может быть достигнуто несколькими способами,

1- Используйте метод $locationChangeStart и убедитесь, что это текущее местоположение перед отображением сообщения. пример ниже,

 $scope.$on('$locationChangeStart', function( event, next, current) {
    // match Current URL and If it true show message.
    if (current.match("\/yourCurrentRoute")) {
          var answer = confirm("Are you sure you want to leave this page?");
          if (!answer) {
               event.preventDefault();
          }else {
              //Do whatever else you want to do 
          }
    }  
});

2- Если вы используете Ui-Router, у него есть опция обратного вызова onExit, пример ниже,

    $stateProvider.state("contacts", { 
           template: "<h1>{{title}}</h1>",
           resolve: { title: 'My Contacts' },
           controller: function($scope, title){
                  $scope.title = title;
           },
          onExit: function(title){
              if(title){ ... do something ... }
          }
   })

3 - существует способ не angular, чтобы сделать это.

window.onbeforeunload = function (event) {
  var message = 'Sure you want to leave?';
  if (typeof event == 'undefined') {
    event = window.event;
  }
  if (event) {
    event.returnValue = message;
  }
  return message;
}

4 - Используйте эту директиву, если эта страница имеет форму, она автоматически очищается, когда форма выгружается. Если вы хотите запретить запуск приглашения (например, потому что вы успешно сохранили форму), вызовите $scope.FORMNAME. $SetPristine(), где FORMNAME - это имя формы, которую вы хотите предотвратить из приглашения.

.directive('dirtyTracking', [function () {
    return {
        restrict: 'A',
        link: function ($scope, $element, $attrs) {
            function isDirty() {
                var formObj = $scope[$element.attr('name')];
                return formObj && formObj.$pristine === false;
            }

            function areYouSurePrompt() {
                if (isDirty()) {
                    return 'You have unsaved changes. Are you sure you want to leave this page?';
                }
            }

            window.addEventListener('beforeunload', areYouSurePrompt);

            $element.bind("$destroy", function () {
                window.removeEventListener('beforeunload', areYouSurePrompt);
            });

            $scope.$on('$locationChangeStart', function (event) {
                var prompt = areYouSurePrompt();
                if (!event.defaultPrevented && prompt && !confirm(prompt)) {
                    event.preventDefault();
                }
            });
        }
    };
}]);

5 существует другой способ использования $destroy, он запускается, когда контроллер уничтожается, записывает его внутри контроллера.

 $scope.$on('$destroy', function () {
     // display error message 
 });

Ответ 2

$stateChangeStart, который вы упомянули, хорош для ваших нужд: на самом деле из документация ui-router:

$stateChangeStart - запускается при начале перехода.

когда пользователь покидает предыдущее состояние.

Здесь вы можете найти ответ на очень похожий вопрос:

Можно ли остановить переход к следующему состоянию в onExit?

а также рабочий фрагмент.

Ответ 3

Вы можете использовать события $stateChangeStart или $stateChangeSuccess в маршруте ui.

// fire when the state is started to change
$rootScope.$on('$stateChangeStart', 
function(event, toState, toParams, fromState, fromParams, options){ 
    // event.preventDefault(); // block transition from happening
});

// fire when the transition completed (onExit)
$rootScope.$on('$stateChangeSuccess', 
function(event, toState, toParams, fromState, fromParams){ 
    // do something 
    if(someCondition){
        $state.go(fromState); // get back to the state
    }
})