如何在 AngularJS 1.4.4 中设置页面标题

Question

我有以下html

<!doctype html>
<html lang="en" data-ng-app="AlexsApp">
  <head> 
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{$scope.title}}</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/site.min.css">
  </head>
  <body>
    <!-- Site Navigation area -->
    <nav class="navbar navbar-inverse navbar-fixed-top transparent">
      <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-navbar-collapse-1" aria-expanded="false">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#/">
          <img src="assets/img/alex_logo_sm.png" alt="Alex Pittendreigh's Logo">
        </a>
      </div>
      <div class="collapse navbar-collapse" id="bs-navbar-collapse-1">
        <ul class="nav navbar-nav">
          <li>
            <a href="#/contact">Contact</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <!-- Main content area -->
  <div class="container" data-ng-view>
  </div>

  <!-- Site Footer navigation -->
  <nav class="hidden-xs navbar navbar-inverse navbar-fixed-bottom transparent">
      <div class="container-fluid">
      <p id="footer-text">Copyright &copy; 2015 Alex Pittendreigh. All rights reserved.</p>
    </div>
  </nav>

  <!-- Site script files -->
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js">  </script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-route.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <script src="assets/js/site.js"></script>
</body>

和以下 javascript 文件

var app = angular.module('AlexsApp', ['ngRoute']);

app.config(function($routeProvider) {
  $routeProvider.
    when('/', { 
      controller: 'HomeCtrl', 
      templateUrl: 'assets/partials/home.html' 
    }).
    when('/contact', { 
      controller: 'ContactCtrl', 
      templateUrl: 'assets/partials/contact.html' 
    }). 
    otherwise({ 
      redirectTo: '#/' 
    });
});

app.controller('HomeCtrl', function($scope, $http) { 
  $scope.title='Alex Pittendreigh';
});

app.controller('ContactCtrl', function($scope, $http) {
  $scope.title='Contact Alex Pittendreigh';
});

其他两个文件是简单的 HTML 内容，当在 Angular 中选择新路线时会加载这些内容。

我的问题是我想在路线更改时更改页面标题，但没有发生。相反，我倾向于将路线显示为标题。

我在 Whosebug 上尝试了多个来源并查看了文档，但实际上没有找到适合我的解决方案。

有人可以帮忙吗？

Answer 1

我会这样做：

在HTML标签中放置一个主控制器AppCtrl并添加正确的标题绑定：

<html lang="en" data-ng-app="AlexsApp" ng-controller="AppCtrl">
  <head> 
    <title>{{pageTitle}}</title>
  </head>

然后更改路由以添加 title 属性:

app.config(function($routeProvider) {
  $routeProvider.
    when('/', { 
      controller: 'HomeCtrl', 
      templateUrl: 'assets/partials/home.html',
      title: 'Alex Pittendreigh'
    }).
    when('/contact', { 
      controller: 'ContactCtrl', 
      templateUrl: 'assets/partials/contact.html',
      title: 'Contact Alex Pittendreigh'
    }). 
    otherwise({ 
      redirectTo: '#/' 
    });
});

最后在 AppCtrl 控制器中每次路线改变时将标题分配给 pageTitle：

.controller('AppCtrl', function($rootScope) {
  return $rootScope.$on('$routeChangeSuccess', (function() {
    return function(event, current, previous) {
      return $rootScope.pageTitle = $route.current.title;
    };
  }));
});

大功告成

Answer 2

Michelem 的回答应该没问题。但是，作为一般提示，请尽量避免在您的应用程序中使用 $scope 并改用 controllerAs 语法并直接在控制器上声明您的 $scope 属性。

$scope 有一个坏习惯，当你在一个页面上有不同的控制器时，你不清楚正在使用哪个范围，比如你的设置以 AppCtrl 作为根，在 [= 中注入控制器14=]元素。

此外，$scope 将从 Angular 2 中删除，因此如果您打算将来将您的应用程序迁移到 Angular 2，则应避免使用它。

基本上你的代码应该是这样的：

<html lang="en" data-ng-app="AlexsApp" ng-controller="AppCtrl as app">
 <head> 
  ...
 <title>{{app.title}}</title>
  ...
</head>
  ...

并像这样声明你的路线：

app.config(function($routeProvider) {
 $routeProvider.
   when('/', { 
      controller: 'HomeCtrl', 
      controllerAs: 'home',
      templateUrl: 'assets/partials/home.html',
      title: 'Alex Pittendreigh'
}).
   when('/contact', { 
      controller: 'ContactCtrl', 
      controllerAs: 'contact',
      templateUrl: 'assets/partials/contact.html',
      title: 'Contact Alex Pittendreigh'
}). 
   otherwise({ 
     redirectTo: '/' 
   });
});

并像这样声明您的 AppCtrl：

.controller('AppCtrl', function($rootScope, $route) {
   var self = this;
   self.title = 'Initial Title';
   $rootScope.$on('$routeChangeSuccess', function() {
     self.title = $route.current.title;
 });
});

进一步阅读 $scope 与 controllerAs：http://codetunnel.io/angularjs-controller-as-or-scope/

查看 angular-ui-router: https://github.com/angular-ui/ui-router 可能也是值得的，因为它能够处理更复杂的任务，例如嵌套视图， ngRoute 无法完成。

如何在 AngularJS 1.4.4 中设置页面标题

How do I set Page Title in AngularJS 1.4.4

html

javascript

angularjs

angular-routing