javascript - 更改谷歌搜索中显示的网站标题(通过 Angular 路由器和用户界面路由器控制)

Question

我目前正在通过 ui 路由器构建一个 Angular 1.5 网站，其中网页上的标题会随着 Controller 的变化而变化，具体取决于用户所在的页面。 HTML 看起来像这样

<title ng-controller="pageTitle">Red Vase | {{ page }}</title>

Controller 代码是这样的

 angular.module('redvase')
  .controller('pageTitle', function($scope, $state, $rootScope) {
      $rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams) {
        $scope.current = toState.name;
        if ($scope.current === "home") {
          $scope.page = "Home"
        } else if ($scope.current === "inspire") {
          $scope.page = "Inspire Others"
        } else if ($scope.current === "inspireShop") {
          $scope.page = "Inspired Living Store"
        } else if ($scope.current === "blog") {
          $scope.page = "Blog"
        } else if ($scope.current === "contactus") {
          $scope.page = "Contact Us"
        } else {
          $scope.page = "Home"
        }
    })
  })

在 Chrome 中搜索网站时，自动填充历史记录显示为“myredvase.com - Red Vase | {{ page }}”，而不是“myredvase.com - Red Vase | Home”。

有人可以建议让 Chrome 显示“myredvase.com - Red Vase | Home”，尽管标题标签包含 {{ page }} 表达式吗？我一直在摸索这个问题。

谢谢!

Answer 1

使用 $rootScope 插入的 $scope

angular.module('redvase')
  .controller('pageTitle', function($scope, $state, $rootScope) {
      $rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams) {
        $scope.current = toState.name;
        if ($scope.current === "home") {
          $rootScope.page = "Home"
        } else if ($scope.current === "inspire") {
          $rootScope.page = "Inspire Others"
        } else if ($scope.current === "inspireShop") {
          $rootScope.page = "Inspired Living Store"
        } else if ($scope.current === "blog") {
          $rootScope.page = "Blog"
        } else if ($scope.current === "contactus") {
          $rootScope.page = "Contact Us"
        } else {
          $rootScope.page = "Home"
        }
    })
  })