Как побороть неожиданную перезагрузку страницы в одностраничном приложении Angular.js?

Question

[Антон Конюшевский]

Столкнулся с проблемой, в моем приложении я использую стандартный роутер angular.js:

$routeProvider
            .when('/', {templateUrl: '/js/app/index/index.html'})
            .when('/payments', {templateUrl: '/js/app/payments/index.html'})
            .when('/payments/:payment_id', {templateUrl: '/js/app/payment_form/index.html'})
            .otherwise({redirectTo: '/'});

Далее следующий сценарий (для переходов используются обычные ссылки с параметром ng-href):
1. Переходим в /payments
2. Переходим в /payments/4

<a data-ng-href="/payments/{{payment.service_id}}">

3. Нажимаем кнопку назад
<a data-ng-href="/payments">
4. Опять переходим в "/payments/4", страница полностью перезагружается, потом отрабатывает роутер и открывается нужная форма. При первом переходе, перезагрузки не происходит.

Подскажите куда копать, почему при втором и последующем переходах начинаются перезагрузки страницы, причем только при переходе на конкретный платеж. Если ходить по остальным 2-м ("/", "/payments") страницам, переходов нет?

Comments

[Sergey Romanov]

Может из за кнопки назад? Может после нее страбатывает? Может настроки инспектора в браузере он сбрасывает сессию?

В любом случае попробуйте использовать роутинг через state. Это во первых гибче, во вторых у меня ни чего такого не было. Все работало отлично.

[Антон Конюшевский]

Кнопка "Назад" - это обычная ссылка, с тем же параметром ng-href. В браузере тоже ничего такого не стоит. Причем на любых других страницах проблем нет. Ходит туда сюда нормально.

Роутинг через state - это ui-route?

Answer 1

[Антон Конюшевский]

Был код:

<a data-ng-href="/payments/{{payment.service_id}}" data-ng-bind="payment.www_name" data-ng-if="payment.type !== 'group'"></a>

Попробовал убрать директивы ng-bind и ng-if в родительский и дочерний элемент соответсвенно. Вроде стало получше. Но! Заметил, если мы попадаем по внутреннему span с ng-bind, то все ок, страница не перезагружается. Если попадаем по элементу a, страница перезагружается. (у ссылки свойство display:block; у span - inline). Окей, переносим отступы у ссылки в span, добавляем display:block и, вуаля, все заработало. Костыль конечно адский, почему так происходит понять не могу. Т.е. если мы кликаем по дочернему элементу ссылки, все хорошо. Если по самой ссылке, происходит перезагрузка страницы.

Стал код:

<div  data-ng-if="payment.type !== 'group'">
	<a data-ng-href="/payments/{{payment.service_id}}"><span  data-ng-bind="payment.www_name" class="link_pressable"></span></a>
</div>