AngularJS с ui.router: перезагружать страницу при нажатии на ту же ссылку состояния

Я только получил запрос от нашей команды QA, что, по моему мнению, звучит смешно. Вот он: предположим, что вы уже находитесь в состоянии "about" в приложении angular, и когда вы снова нажимаете на URL-адрес состояния "about" из верхнего меню, вы хотите, чтобы страница "about" перезагрузить. Страница about не извлекает данные из любой точки мира, кстати, перезагрузка просто эквивалентна миганию.

Для конфигурации состояния в моем приложении angular выглядит так:

.state('about', {
  url: '/about',
  templateUrl: '/path/to/about.html',
  controller: 'aboutCtrl as aboutView'
});

И в верхнем меню у нас есть ссылка, указывающая на это состояние:

<a ui-sref="about">About</a>

Я пробовал много вещей, чтобы заставить это работать: нажатие ссылки запускает перезагрузку того же состояния.

Такие вещи, как $state.go('about', {}, {reload: true}); или $state.transitionTo('about', {}, {reload: true});, не работают, потому что ссылки являются статическими.

В последнее время я пытаюсь манипулировать перезагрузкой в фазе run angular, слушая событие '$stateChangeSuccess', но я не думаю, что это сработает, потому что нет изменений состояния в все, если вы нажмете на ссылку 'about', пока вы правы в этом состоянии.

Есть ли способы обойти это? Благодаря

Ответ 1

Существует атрибут опции ui-sref-opts, который поставляется с интерфейсом UI Router. Я столкнулся с той же проблемой, и решил ее.

Например: <a ui-sref="home" ui-sref-opts="{reload: true}">Home</a>

URL-адрес документов: UI Router DOcs

Ответ 2

Вы правы, я не могу получить какие-либо события изменения состояния , чтобы запустить один из них уже в этом состоянии. Пока, и если эта функциональность станет доступной для использования через этот api, то здесь полу-хакерское решение для этого. Мы можем просто использовать ng-click и использовать некоторую глупую логику, чтобы успокоить QA (в вашем случае). Кроме того, я не знаю вашу реализацию контроллера, поэтому я поместил свое предложение на $rootScope в .run в этом примере для простоты и видимости, но, если вы решите это сделать, обязательно включите их. Обратите внимание на следующий пример...

<a ui-sref="about" ng-click="sillyQA()">About</a>

.run(['$rootScope', '$state', function($rootScope, $state) {

    $rootScope.sillyQA = function() {
        if($state.current.name === 'about') {
            $state.go('about', {}, { reload: true });
        }
    }

    // -- just to see our about => about state 'change'
    $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams){
        console.log('toState:   ' + toState.name );
        console.log('fromState: ' + (fromState.name || 'Just got there! click again!'));
    })
}]);

JSFiddle Link - демо