Обновление тега заголовка с помощью 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. Вы можете использовать его для обновления названия страницы до статического или динамического значения на основе текущего состояния. Он также корректно работает с историей браузера.