Question

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

实际上，问题不在于设置标题，问题是标题设置为history.pushState之前的下一个状态的标题。因此，当我转换到新网址时，历史记录中的第一个项目与当前页面的名称相同。

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

有解决方法吗？在管道中，是否会调用history.pushstate？

Answer 1

我有类似的＆＃39;情况......并回答here。

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

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

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

Answer 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。

使用AngularJS和UI-Router更新标题标记

2 个答案: