Давно полюбив Angular, я только сейчас добрался до блога автора фреймворка Дэна Уолина.
А зря — там можно найти массу интересных мыслей, необходимых для каждого приложения.
Один из них я перевел в этой статье.
В нем вы узнаете, как можно остановить переход на другую страницу в приложении Angular. 
Словарь переводчика:
- просмотр - шаблон
- маршрут - маршрут, путь
- навигация - переход
Маршрутизация — отличный инструмент, который позволяет связывать шаблоны с контроллерами AngularJS с наименьшим количеством требуемого кода.
Хотя пользователь может перейти непосредственно к заданному пути, возможно, что он инициирует навигацию до завершения какого-либо важного действия (например, сохранения данных).
В таких ситуациях вы можете отменить переход и спросить пользователя, хочет ли он завершить свою работу, или предупредить его, что его данные будут потеряны.
В этой статье я хочу рассказать о методике, с помощью которой можно реализовать такую задачу.
Событие $locationChangeStart
Когда в приложении AngularJS происходит переход, происходит несколько событий.Один из них называется $locationChangeStart, а другой — $routeChangeStart (на самом деле их еще несколько).
На данный момент (версия 1.2) событие $routeChangeStart не предоставляет возможности отмены перехода, но $locationChangeStart для этого вполне подходит. Если вы посмотрите на код AngularJS, вы найдете следующий раздел, в котором показано событие $locationChangeStart, вызываемое при вызове метода onUrlChange() объекта $browser:
Самая важная часть кода — вызов $broadcast. Этот вызов передает событие $locationChangeStart всем дочерним областям, чтобы они могли быть уведомлены об изменении местоположения.$browser.onUrlChange(function (newUrl) { if ($location.absUrl() != newUrl) { if ($rootScope.$broadcast('$locationChangeStart', newUrl, $location.absUrl()).defaultPrevented) { $browser.url($location.absUrl()); return; } $rootScope.$evalAsync(function () { var oldUrl = $location.absUrl(); $location.$$parse(newUrl); afterLocationChange(oldUrl); }); if (!$rootScope.$$phase) $rootScope.$digest(); } });
Чтобы обработать это событие, вы можете использовать функцию $rootScope.on().
Например, я добавил вызов $on() в функцию, которая вызывается сразу после запуска контроллера: function init() {
//initialize data here.
//Make sure they're warned if they made a change but didn't save it
//Call to $on returns a "deregistration" function that can be called to
//remove the listener (see routeChange() for an example of using it)
onRouteChangeOff = $rootScope.$on('$locationChangeStart', routeChange);
}
Этот код прослушивает событие $locationChangeStart и вызывает функцию RouteChange(), когда оно происходит. Возвращаемое значение функции $on — это функция «отменить ожидание», которую можно вызвать, чтобы прекратить ожидание события.
В этом примере он называется onRouteChangeOff (доступен в контроллере).
Очень скоро вы увидите, как его используют.
Отмена маршрута
Функция обратного вызова RouteChange() запускается событием $locationChangeStart и отображает диалоговое окно, предупреждающее пользователя:
Вот код функции RouteChange():
function routeChange(event, newUrl) {
//Navigate to newUrl if the form isn't dirty
if (!$scope.editForm.$dirty) return;
var modalOptions = {
closeButtonText: 'Cancel',
actionButtonText: 'Ignore Changes',
headerText: 'Unsaved Changes',
bodyText: 'You have unsaved changes. Leave the page?'
};
modalService.showModal({}, modalOptions).
then(function (result) {
if (result === 'ok') {
onRouteChangeOff(); //Stop listening for location changes
$location.path(newUrl); //Go to page they're interested in
}
});
//prevent navigation by default since we'll handle it
//once the user selects a dialog option
event.preventDefault();
return;
}
В параметрах этой функции можно заметить объект события и новый маршрут, по которому пытается пройти пользователь.
Поскольку перед изменением шаблона пользователю необходимо напомнить о потере данных, для отмены перехода используется объект события.
Обратите внимание на вызов event.preventDefault() в конце функции.
Диалог отображается вызовом функции modalService.showModal() (см.
мой предыдущий пост о персонализированном modalService, который работает как оболочка сервиса $modal из Angular UI Bootstrap).
Если пользователь выберет «Игнорировать изменения», то его изменения будут отменены и приложение пойдет по необходимому маршруту.
Это произойдет путем отключения ожидания события $locationChangeStart путем вызова функции onRouteChangeOff() (помните, что эта функция возвращается при вызове функции $on), чтобы мы не застряли в бесконечном цикле открытия диалогового окна.
поле, когда мы нажимаем кнопку «Игнорировать изменения».
Затем вызывается $location.path(newUrl) для обработки перехода к заданному шаблону.
Если пользователь отменит действие, он останется в текущем шаблоне.
выводы
Ключом к отмене перехода является понимание того, как работает событие $locationChangeStart. Надеюсь, в будущем подобную задачу можно будет решить с помощью события $routeChangeStart, но на данный момент приведенный выше код выполняет эту работу в полной мере.Вы можете увидеть пример этого кода, работающего в приложение для управления клиентами , который доступен на Github (особенно шаблон customerEdit).
Узнать больше о приложение здесь .
В опросе могут участвовать только зарегистрированные пользователи.
Войти , Пожалуйста.
Вас интересуют переводы статей из блога Дэна Уолина? 91,37% Да 180 8,63% Нет Проголосовали 17 197 пользователей.
32 пользователя воздержались.
Теги: #angularjs #JavaScript #отмена #переход #маршрут #JavaScript #программирование #angular
-
Как Выбрать Компанию По Разработке Wordpress
19 Oct, 24 -
Деревянные Игрушки, Часть Пятая - 1991 Г.
19 Oct, 24 -
Системы Комментирования И Подводные Камни
19 Oct, 24
