使用 AngularJS 和 UI-Router 更新标题标签 [英] Updating title tag using AngularJS and UI-Router

问题描述

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

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).

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

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.

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

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.

有没有办法解决这个问题?在管道中时，history.pushstate 会被调用吗?

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

推荐答案

我有一个类似"的情况...并回答了它此处.

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

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

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>

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

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

这篇关于使用 AngularJS 和 UI-Router 更新标题标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！