如何通过 AngularJS 向元素添加类并更改页面标题？答案

【问题标题】：How do add classes to elements and change page title through AngularJS?如何通过 AngularJS 向元素添加类并更改页面标题？
【发布时间】：2013-09-27 20:09:25
【问题描述】：

所以，我最近偶然发现了一些很棒的框架，AngularJS。

我真的很喜欢它，而且它似乎非常适合我，因此，我需要做一些事情才能继续前进。

我希望能够更改页面的页面标题，基于

(a) 页面 URL，和/或

(b) 收到的数据，例如正在提交的表单，而不是显示警报，页面标题将更改，页面内容可能会更改

另外，我希望根据当前页面向菜单链接添加类。因此，如果当前页面是主页，我想将一个类添加到“主页”的 <li> 元素，而不是其他元素，并且在“关于”时，该页面的 <li> 元素应该具有活动类对于该导航项。

谢谢。

【问题讨论】：

也许显示一些你已经完成的代码。 JSFiddle 可以帮您找到答案。
AFAIK AngularJS 不会阻止您编写 VanillaJS。
第一个需求可以通过 $routeParams 来解决，第二个需求可以通过 ngClass 来解决。这些 Angular 的部分都有很好的文档记录，请查看它们。
@mortalapeman 你为什么不输入一些代码来帮助他和其他人。
保罗所说的。人们习惯了使用不同库的快捷方式 cough jquery cough 他们忘记使用 Javascript。

标签： javascript jquery html css angularjs

【解决方案1】：

使用$routeParams 可以解决第一个要求，使用ngClass 可以解决第二个要求。

这是一个快速的example plunker 帮助您入门：

Javascript

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

app.config(function ($routeProvider) {
    $routeProvider
        .when('/', { template: '<p>Home page<p>'})
        .when('/:title', { template: '<p>Page for {{ name }}</p>', controller: 'MainCtrl'})
        .otherwise({
            redirectTo: '/'
        });
});

app.controller('MainCtrl', function ($scope, $routeParams) {
    $scope.$on('$routeChangeSuccess', function (event, current, prev) {
        $scope.name = $routeParams.title || 'World';
    });
});

HTML

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.0.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js" data-semver="1.0.8"></script>
    <script src="app.js"></script>
  </head>

  <body>
    <div ng-controller="MainCtrl">
      <h2> Hello {{ name }}!</h2>
      <ul class="nav-bar">
        <li ng-class="name"><a href="#/Bob">Bob</a></li>
        <li ng-class="name"><a href="#/Harry">Harry</a></li>
        <li ng-class="name"><a href="#/">Home</a></li>
      </ul>
    </div>
    <div ng-view></div>
  </body>

</html>

CSS

.nav-bar {
  display: block;
  width: 100%;
}

.nav-bar li {
  display: inline-block;
  text-decoration: none;
  width: 50px;
}

.Bob {
  background-color: yellow;
}

.Harry {
  background-color: orange;
}

【讨论】：