javascript - AngularJS 应用程序上的动态页面标题

Question

我们正在构建一个大型 AngularJS/NodeJS 应用程序，我们遇到了一个问题。它与页面标题有关。在我们的应用程序中，我们希望每个状态都有动态页面标题(我们正在使用 ui-router)。我知道我们可以将自定义字段添加到任何状态(如 pageTitle):

.state('app.home', {
    url: "",
    templateUrl: '/templates/home.html',
    controller: 'HomeController',
    pageTitle: "Home"
})

然后我们可以在 $stateChangeSuccess 上检索它并将其设置到 $scope

.run([
    '$rootScope', function ($rootScope) {
      'use strict';

      $rootScope.appState = $rootScope.appState || {};

      $rootScope.$on("$stateChangeSuccess", function (event, toState, toParams, fromState, fromParams) {

      //TODO: We need to update the title and meta here, and then retrieve it and assign it to appState
      $rootScope.appState.pageTitle = toState.pageTitle;

});

}]);

，然后在我们的 index.html 上做:

<title ng-bind="appState.pageTitle">Page Title before the dynamic title kicks in</title>

但是，在我们的例子中，页面标题必须通过调用我们的 Node.js REST API 来自数据库。例如，想象一下，你进入一个产品页面，你必须获取产品，获取产品的标题来设置页面标题。任何想法我们如何做到这一点？

干杯，
伊拉克利斯

Answer 1

您应该能够使用 $document 服务。

喜欢:

function SampleController($document) {
    $document.title = "Updated from Angular.JS";
}

官方文档:

https://docs.angularjs.org/api/ng/service/$document