angularjs - 基于路由的Angular切换CSS类？

Question

我有以下 HTML 文件:

<header ng-include="'app/partials/includes/header.html'"></header>

<div class="container" ng-controller="LoginCtrl">

</div>

以上为登录页面，以下为注册页面:

<header ng-include="'app/partials/includes/header.html'"></header>

<div class="container" ng-controller="RegisterCtrl">

</div>

这是标题:

<div class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle Navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="#" class="navbar-brand">Curve</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <li class="active"><a href="#/register">Sign Up</a></li>
                <li><a href="#/login">Sign In</a></li>
            </ul>
        </div>
    </div>
</div>

如何根据路由将 .active 类应用于列表元素？

如果路由是/register，我希望应用事件类，登录时也是如此。

如何在 Angular 中完成此操作？

Answer 1

在任何元素上使用 ng-class 有条件地应用于元素。使用对象表示法，键是类名，值是一个表达式，当计算结果为 true 时，该类将添加到该元素的类属性中。

<div class="header" ng-controller="HeaderController">
  <div ng-class="{ active: registrationOrLogin }">

</div>

在 Controller 中:

app.controller("HeaderController", [ "$scope", "$location", function($scope, $location) {
    $scope.registrationOrLogin = $location.hash() == "/login" || $location.hash() == "/registration";
} ] );