Updating title tag using AngularJS and UI-Router

2020-02-08 07:59发布

站内问答 / 前端开发
878 3 6

I am running into a weird issue while trying to set the title of the page using the name of the current state (via ui-router).

Actually, the issue is not with setting the title, the issue is that the title gets set to the title of the next state before the history.pushState. So when I transition to a new url, the first item in the history has the same name as the current page.

I was just playing around with the sample (http://angular-ui.github.io/ui-router/sample/) and I managed to reproduce it there as well. If you click on About, then back on home you will see 2 different entries for 'home'. They both point to the correct url, but their names are mangled. Weirdly enough, clicking through the Contact.list and contact.details sets the history properly.

Is there a way around this? When in the pipeline does the history.pushstate get called?

3条回答
做个烂人
2楼-- · 2020-02-08 08:38

I have a similar situation like yours and I do it like the following. You can put that in your main app run block like following. I had 

 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');
    }
 ]);

and in the html head i have 

<html class="no-js" class="ng-app" ng-app="..." id="ng-app">
    <head>
     ....
       <title ng-bind="pageTitle"></title>

hope this works for you.

PS: Please consult https://docs.angularjs.org/guide/module for details.

查看更多
0人赞 添加讨论(0) 举报
姐就是有狂的资本
3楼-- · 2020-02-08 08:45

I wrote the angular-ui-router-title plugin for this. You can use it to update the page title to a static or dynamic value based on the current state. It correctly works with browser history, too.

查看更多
0人赞 添加讨论(0) 举报
Luminary・发光体
4楼-- · 2020-02-08 09:04

I had a 'similar' situation... and answered it here.

It basically defines $rootScope.$state = $state inside of the run method of angular. That allows us to access current states info in templates.

<title ng-bind="$state.current.data.pageTitle"></title>

The key is defining it on the $rootScope in the run method.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)