3

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

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

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

(a)页面 URL，和/或

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

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

谢谢。

4

1 回答 1

3

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

这是一个快速的示例 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;
}
于 2013-09-23T04:16:35.067 回答