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

How do I set Page Title in AngularJS 1.4.4

本文关键字：标题 设置 AngularJS      更新时间：2023-09-26

我有以下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中选择新路由时加载。

我的问题是，我想改变页面标题时，路由的变化，这是不发生的。相反，我倾向于将路由显示为标题。

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

有人能帮忙吗?

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

当您在一个页面上有不同的控制器时，

$scope有一个令人讨厌的习惯，即不清楚正在使用哪个范围，就像您将AppCtrl作为根元素而将注入的控制器放在data-ng-view元素中的设置一样。

另外，$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 vs controllerAs: http://codetunnel.io/angularjs-controller-as-or-scope/

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

我会这样做:

在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;
    };
  }));
});

你完成了

相关文章：