Question

我的标题标签：

<title ng-bind="title"></title>

当我浏览我的应用时，页面标题会在浏览器标签中正确更新。但是，当我在Chrome和Opera中查看历史记录而不是页面标题时，我会看到原始网址。 Firefox不是这种情况，它正确显示页面标题。

我尝试添加占位符标题：

<title ng-bind="title">Placeholder Title</title>

但这并不能解决问题。

您可以通过访问Angular Material这样的网站，浏览几条路线并查看 Chrome或Opera中的历史记录，您将看到如下内容：

https://material.angularjs.org/latest/demo/colors

而不是

Angular Material - Demos > Colors。

为什么会这样？如何解决这个问题？

我找到的唯一解决方法是指定标题

<title>{{title}}</title>

这使得Chrome和Opera历史记录显示实际的标题而不是网址。这个问题方法是第一个加载的页面将出现在历史记录中标题为＆＃34; {{title}}＆＃34;，这就是我们首先使用ng-bing="title"代替{{title}}的原因。

Answer 1

不知道您正在使用的角度版本，我尝试复制并解决您在Plunker中遇到的问题，这里是演示：https://run.plnkr.co/YhR3RzIizIQXRbZY/#/home

//如果链接不起作用，请转到我的答案底部并打开Plunker，然后在预览部分点击右上角的蓝色小图标。在另一种情况下，你无法看到标题。

它的代码：

＆＃13;

var app = angular.module('plunker', ['ngRoute']);

app.controller('MainCtrl', function($scope, $rootScope) {
});

app.controller('HomeController', function($scope) {
});

app.controller('AboutController', function($scope) {
});

app.config(function($routeProvider) {
  $routeProvider.
  when('/home', {
    templateUrl: 'embedded.home.html',
    controller: 'HomeController',
    title: 'Home'
  }).
  when('/about', {
    templateUrl: 'embedded.about.html',
    controller: 'AboutController',
    title: 'About'
  }).
  otherwise({
    redirectTo: '/home'
  });
});

app.run(['$rootScope', '$route',
    function ($rootScope, $route) {

        $rootScope.titleBase = 'Welcome to - ';
        $rootScope.$on('$routeChangeSuccess', function() {
            document.title = $rootScope.titleBase + $route.current.title;
        });
    }
  ]
)

＆＃13;

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title></title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular-route.js"></script>
  <script src="app.js"></script>
</head>

<body>
  <script type="text/ng-template" id="embedded.home.html">
    <h1> Home </h1>
  </script>

  <script type="text/ng-template" id="embedded.about.html">
    <h1> About </h1>
  </script>

  <div>
    <div id="navigation">
      <a href="#/home">Home</a>
      <a href="#/about">About</a>
    </div>

    <div ng-view></div>
  </div>
</body>

</html>

＆＃13;

以下是我在Plunker中的代码：https://plnkr.co/edit/8iZ4zjqj75Zz3SS0C5DE?p=preview

基本上，我使用$rootScope来更新我的标题并使用document.title，遗憾的是ng-bind不适用于浏览器的历史记录。似乎角度正确地拾取它。

我也发现了这两个类似的问题：

Set Page title using UI-Router

How to change page title in Angular using $routeProvider

对不起，但在我的第一个回答中，我没有查看浏览器的历史记录。

使用ng-bind会导致Chrome历史记录显示网页网址而不是实际网址

1 个答案: