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

另外两个文件是在Angular中选择新路由时加载的简单HTML内容。

我的问题是，我想在路线发生变化时更改页面标题，而这种情况并未发生。相反，我倾向于将路线显示为标题。

我已经在StackOverflow上尝试了几个来源并查看了文档，但是实际上找到了一个适合我的解决方案。

有人可以帮忙吗？

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

米歇尔姆的答案应该可以正常运作。但是作为一般提示，请尽量避免在应用程序中使用$ scope并使用controllerAs语法，并直接在控制器上声明$ scope属性。

$ scope有一个讨厌的习惯，即当你在一个页面上有不同的控制器时，不清楚使用哪个范围，比如你在AppCtrl作为root的设置和{{1}中注入的控制器}元件。

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

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

data-ng-view

并声明你的路线：

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

并声明你的AppCtrl如下：

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: '/' 
   });
});

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

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

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

2 个答案: