Angular JS 是一种流行的前端框架，而 Bootstrap 是一套广泛使用的 UI 库。将它们结合使用可以提高开发效率和用户体验。在使用 Bootstrap 导航栏时，我们可能会需要通过 Angular JS 控制导航栏的 active 类。
什么是导航栏的 active 类？
Bootstrap 导航栏通常由多个链接组成，用户点击其中一个链接后，该链接应该被视为当前选中的链接，以便用户知道自己所在的页面。为此，Bootstrap 提供了一种称为 active 的 CSS 类，该类用于标记当前选中的链接。
如何使用 Angular JS 设置导航栏的 active 类？
当用户单击导航栏中的链接时，Angular JS 可以使用 $location 服务获取当前 URL，并将其与每个导航链接的 href 属性进行比较。如果两者匹配，则将相应链接的 class 属性设置为 "active"。
以下是示例代码：
-- -------------------- ---- -------
---- ------------- ----------------
---- ------------------------
---- --------------- -----------------
--- ---------- ------------
--- ----------- ------- ----------------- ----- ---------------------------
--- ----------- ------- ------------------ ----- -----------------------------
--- ----------- ------- -------------------- ----- ---------------------------------
-----
------
------
------angular.module('myApp', [])
.controller('myCtrl', ['$scope', '$location', function($scope, $location) {
$scope.isActive = function(viewLocation) {
return viewLocation === $location.path();
};
}]);在上面的代码中，我们首先为导航栏创建了一个控制器 myCtrl。isActive 函数接受一个视图位置参数，并将其与当前 URL 进行比较。如果它们匹配，则返回 true，否则返回 false。
在 HTML 中，我们使用 ng-class 指令将 active 类绑定到每个导航链接。ng-class 指令将一个对象作为参数，该对象的属性名是要设置的类名，属性值是一个布尔表达式。当布尔表达式为 true 时，相应的类将被添加到元素上。
最后，我们将 myCtrl 控制器绑定到 nav 元素上，以便 Angular JS 可以处理其中的指令。
总结
在本文中，我们了解了 Bootstrap 导航栏的 active 类是什么以及如何使用 Angular JS 控制它。这种方法不仅可以提高开发效率，还可以增强用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/25017