如何在 AngularJS 上添加不同元素的 addClass 和 removeClass？

Question

我有一个想要实现的简单 dom：

<header>
    <button class="open-btn></button>
</header>

<nav class="active">
    <button class="close-btn"></button>
</nav>

如何在Angular上用单独的元素实现简单的addClass和removeClass功能？

我已经阅读过关于 Service、Factory 和 Controller 的文章，这听起来让我很困惑。

我已经能够成功地使用 Controller 在同一个控制器上添加和删除类，比如说 open-btn 和 close-btn 都在 nav 下，但是如果我使用不同的元素呢？我所做的对我来说似乎很错误，这是正确的方法吗？我必须将其注册到 Service/Factory 吗？

场景：

当用户点击open-btn时，元素nav会有active的类，如果用户点击close-btn，那么nav会移除它的active按钮。

使用 jQuery 似乎很容易，但我将如何使用 Angular 方式呢？

Answer 1

您可以让按钮在作用域中设置一个值，然后使用ng-class根据该元素的值给元素类：

<header>
   <button class="open-btn" ng-click="isActive = true">Open</button>
</header>

<nav ng-class="{ 'active': isActive }">
   <button class="close-btn" ng-click="isActive = false">Close</button>
</nav>

来自ng-class 文档：

如果表达式的计算结果是一个对象，那么对于每个键值对 具有真值的对象的相应键用作 类名。

Answer 2

Angular 有 ngClass 来添加/删除类

像这样

Ctrl

$scope.isOpen=false;

$scope.open=function(){
  $scope.isOpen=true;
}
$scope.close=function(){
  $scope.isOpen=false;
}

HTML

<header>
    <button class="open-btn" ng-click="open()"></button>
</header>

<nav class="active" ng-class="{'active': isOpen }">
    <button class="close-btn" ng-click="close()"></button>
</nav>