Angular: как переключать маршруты на основе вызовов функций

У меня есть три маршрута в моем app.js, но когда я переключаюсь с создания на любой другой маршрут, я хочу проверить, намеренно ли пользователь щелкнул, чтобы переключиться, или это ошибка, поэтому появится всплывающее окно, которое попросит пользователя остаться на странице или покинуть страницу. В обычных случаях это работало бы с этим кодом:

window.onbeforeunload = confirmExit;
function confirmExit() {
    return "You have attempted to leave this page. Are you sure?";
}

но поскольку это приложение SPA, я должен запускать эту функцию при переключении маршрутов:

ЗДЕСЬ МОИ МАРШРУТЫ

testApp.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/tests', {
        templateUrl: 'partials/list.html',
        controller: 'ListCtrl'
      }).
      when('/tests/:testsId', {
        templateUrl: 'partials/detail.html',
        controller: 'DetailCtrl'
      }).
      when('/create/', {
        templateUrl: 'partials/create.html',
        controller: 'CreateCtrl'
      }).
      otherwise({
        redirectTo: '/tests'
      });
  }]);

Буду признателен за любую оказанную помощь.


routes angularjs onbeforeunload
person Alex    schedule 14.04.2014    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я бы сделал это с помощью угловой директивы:

.directive('confirm', [
    function() {
        return {
            restrict: 'AEC',
            link: function($scope, element) {
                element.bind('click', function(event) {

                        if (!confirm('You have attempted to leave this page. Are you sure?')) {
                            event.preventDefault();
                            return false;
                        }
                });
            }
        };
    }
]);

и в вашем HTML:

<a href="/route" confirm>link</a>

Таким образом, стандартное перенаправление ссылки будет перехвачено, и перенаправление произойдет только в том случае, если пользователь подтвердит это.

Рабочая скрипка: http://jsfiddle.net/HB7LU/3119/

изменить: удалена ссылка на jquery + ссылка на jsfiddle

edit2: для глобального перехвата перенаправления (например, клавиша возврата или любая ссылка на странице, на которую нажали), см. эту скрипту http://jsfiddle.net/9MnE9/124/

Здесь я использую $routeChangeStart, чтобы отслеживать любое изменение местоположения.

person Jscti    schedule 14.04.2014
comment
что если кто-то нажмет BACKSPACE ?? - person Alex; 14.04.2014
comment
Когда ? после переадресации? он будет перенаправлен на предыдущую страницу, как и любой другой SPA/веб-сайт, но вы можете не делать этого, заменив местоположение вместо добавления нового маршрута в историю местоположений (не является частью вашего вопроса) - person Jscti; 14.04.2014
comment
нет, я спрашиваю, я нахожусь на странице создания и нажал клавишу Backspace, возможно, я пришел с какой-то другой страницы, поэтому я буду перенаправлен обратно на эту страницу, в этом случае эта директива не будет активирована. - person Alex; 14.04.2014
comment
есть ли способ, которым я могу сделать это на backspace также ?? - person Alex; 14.04.2014
comment
это по-прежнему не работает для возврата, если каким-то образом я могу активировать подтверждение вашей директивы при нажатии клавиши документа назад, тогда, возможно, это сработает. - person Alex; 14.04.2014
comment
извините за это вы правы. используйте $routeChangeStart вместо $locationChangeStart, чтобы включить забой. Сообщение отредактировано и отредактировано jsfiddle - person Jscti; 14.04.2014
comment
теперь, даже если я скажу отменить, он все равно вернется к предыдущему маршруту. - person Alex; 14.04.2014