Question

所以，我最近偶然发现了一些令人惊讶的框架， AngularJS 。

我非常喜欢它，它似乎非常适合我，所以，在我向前迈进之前，我需要一些东西。

我希望能够根据

更改页面的页面标题

（a）页面网址和/或

（b）收到的数据，例如正在提交的表单，而不是显示提醒，页面标题会发生变化，页面内容可能会发生变化

另外，我希望根据当前页面的内容向菜单链接添加类。因此，如果当前页面是Home，我想在“Home”的<li>元素中添加一个类，而不是其他元素，当在“About”上时，该页面的<li>元素应该拥有该导航项的活动类。

感谢。

Answer 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;
}

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

1 个答案: