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

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

javascript html angularjs

Javascript 如何在AngularJS 1.4.4中设置页面标题,javascript,html,angularjs,angular-routing,Javascript,Html,Angularjs,Angular Routing,我有下面的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&

我有下面的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>

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

我的问题是，当一条路线改变时，我想改变页面标题，但这并没有发生。相反，我倾向于将路线显示为标题

我尝试了StackOverflow上的几个来源，并查看了文档，但没有；我没有找到适合我的解决方案

有人能帮忙吗？

我会这样做：

将主控制器

AppCtrl

放置在HTML标记中，并添加正确的标题绑定：

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

最后，在

AppCtrl

控制器中，每次路线更改时，将标题分配给

pageTitle

：

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

你完成了

米切莱姆的回答应该很好。不过，作为一般提示，请尽量避免在应用程序中使用$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: '/' 
   });
});

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

并按如下方式声明您的AppCtrl：

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

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

进一步阅读$scope vs controllerAs：

还值得一看angular ui路由器：因为它能够处理更复杂的任务，例如ngRoute无法完成的嵌套视图。

尝试使用

{{title}

，

$scope

在angular View中是隐式的。感谢您的回答。这确实有所帮助。然而，我仍然没有得到我想要的标题，即使在应用了下面maxmantz建议的更改之后。我现在得到的是标签为“初始标题”的页面标题，没有进一步的内容。感谢您的回复，使我在这条道路上走得更远。正如我对米切莱姆的评论；上面的答案是，我现在得到的只是页面标题“初始标题”，而不是我想要的标题。下一步是尝试你提供的链接，因为时间已经晚了，这将是明天的工作。活动注册似乎有问题。我已经编辑了注册函数以删除“returnfunction”语句。看看这是否有帮助。