Обновление тега заголовка с помощью AngularJS и UI-Router
У меня возникает странная проблема при попытке установить заголовок страницы с использованием имени текущего состояния (через ui-router).
На самом деле проблема заключается не в настройке заголовка, а в том, что заголовок получает значение заголовка следующего состояния перед history.pushState. Поэтому, когда я перехожу к новому URL-адресу, первый элемент в истории имеет то же имя, что и текущая страница.
Я просто играл с образцом (http://angular-ui.github.io/ui-router/sample/), и мне удалось воспроизвести его там. Если вы нажмете "О", затем вернитесь домой, вы увидите две разные записи для "дома". Оба указывают на правильный URL-адрес, но их имена искажены. Как ни странно, щелчок по контактам Contact.list и contact.details правильно устанавливает историю.
Есть ли способ обойти это? Когда в конвейере вызывает вызов history.pushstate?
Ответы
Ответ 1
У меня была "подобная" ситуация... и ответил на это здесь.
В основном он определяет $rootScope.$state = $state
внутри метода запуска angular. Это позволяет нам получать информацию о текущих состояниях в шаблонах.
<title ng-bind="$state.current.data.pageTitle"></title>
Ключ определяет его в $rootScope в методе run.
Ответ 2
У меня такая же ситуация, как у вас, и я делаю это следующим образом.
Вы можете поместить это в свой основной блок запуска приложения, как показано ниже.
У меня был
angular.module('myApp').run([
'$log', '$rootScope', '$window', '$state', '$location',
function($log, $rootScope, $window, $state, $location) {
$rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
if (toState.title) {
$rootScope.pageTitle = toState.title;
}
});
$rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams) {
// something else
});
$state.go('home');
}
]);
и в html голове у меня
<html class="no-js" class="ng-app" ng-app="..." id="ng-app">
<head>
....
<title ng-bind="pageTitle"></title>
надеюсь, что это сработает для вас.
PS: Подробнее см. https://docs.angularjs.org/guide/module.
Ответ 3
Я написал для этого плагин angular-ui-router-title. Вы можете использовать его для обновления названия страницы до статического или динамического значения на основе текущего состояния. Он также корректно работает с историей браузера.