使用 AngularJS 和 UI-Router 更新标题标签答案

【问题标题】：Updating title tag using AngularJS and UI-Router使用 AngularJS 和 UI-Router 更新标题标签
【发布时间】：2013-12-09 14:20:40
【问题描述】：

我在尝试使用当前状态的名称（通过 ui-router）设置页面标题时遇到了一个奇怪的问题。

实际上，问题不在于设置标题，问题在于标题被设置为history.pushState之前的下一个状态的标题。所以当我转换到一个新的 url 时，历史记录中的第一项与当前页面具有相同的名称。

我只是在玩这个示例 (http://angular-ui.github.io/ui-router/sample/)，我也设法在那里重现了它。如果您单击关于，然后返回主页，您将看到 2 个不同的“主页”条目。他们都指向正确的网址，但他们的名字被破坏了。奇怪的是，点击 Contact.list 和 contact.details 会正确设置历史记录。

有没有办法解决这个问题？在管道中何时调用 history.pushstate？

【问题讨论】：

我无法在示例或我自己的实现中重现此问题。可能跟使用的浏览器有关？
我现在刚刚在 Chrome 33 和 IE 10 上尝试过，并在两者中都重现了它。
啊，我明白你的意思了。历史标题全部向后移 1。一旦您更改页面，最后一页将获得历史中当前页面的标题。由于即使在示例中也存在该错误，它可能只是一个 ui-router 错误。在 gh 上打开一个问题？
当您在 gh 上打开问题时，请在此处发布链接。谢谢。
我可以看到你已经在 gh 上报告了这个错误：github.com/angular-ui/ui-router/issues/674

标签： angularjs angular-ui-router

【解决方案1】：

我有一个“类似”的情况......并回答了here。

它基本上定义了 $rootScope.$state = $state 在 angular 的 run 方法中。这允许我们访问模板中的当前状态信息。

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

关键是在run方法的$rootScope上定义它。

【讨论】：

【解决方案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 插件。您可以使用它来根据当前状态将页面标题更新为 static 或 dynamic 值。它也可以正确处理浏览器历史记录。

【讨论】：