如何使用Bootstrap和AngularJS设置navbar活动类？

Navbar是Bootstrap中一个非常常见的组件，通常用于网站的导航栏。在网站的导航栏中，有一个非常关键的功能是标记活动选项，这样用户才能知道他们正在浏览的页面。在本文中，我们将讨论如何使用Bootstrap和AngularJS设置navbar活动类。

前提条件

在本文中，我们假设您已经对Bootstrap和AngularJS有一定的了解，知道如何在您的应用程序中使用这些框架。如果您还不了解这些框架，建议您先学习这些框架的基础知识。

设置活动类

为了设置navbar活动类，我们需要使用一个AngularJS指令，该指令在选项被点击时会添加一个“active”CSS类。我们将在下面的代码段中展示如何编写这个指令：

angular.module('myApp').directive('isActive', ['$location', function ($location) {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            function setActive() {
                var path = $location.path();
                if (path) {
                    var url = attrs.href.substring(1);
                    if (path.substring(1, url.length + 1) === url) {
                        element.addClass('active');
                    } else {
                        element.removeClass('active');
                    }
                }
            }

            setActive();

            scope.$on('$locationChangeSuccess', setActive);
        }
    };
}]);

这个指令接受一个“$location”服务，并在选项单击时添加一个“active”类。我们使用AngularJS的“$location”服务来获取当前页面的URL路径，然后比较它与选项的URL路径。如果它们匹配，我们将添加一个“active”类。

将此指令添加到您的应用程序中后，可以在您的HTML模板中使用它。以下是一个示例navbar，其中包含三个选项：Home，About和Contact：

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#/">My Application</a>
        </div>
        <div class="collapse navbar-collapse" id="navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li><a href="#/">Home</a></li>
                <li><a href="#/about">About</a></li>
                <li><a href="#/contact">Contact</a></li>
            </ul>
        </div>
    </div>
</nav>

在每个选项的“a”标签中，将使用我们刚刚编写的指令：

<li><a href="#/" is-active>Home</a></li>
<li><a href="#/about" is-active>About</a></li>
<li><a href="#/contact" is-active>Contact</a></li>

这将在单击选项时添加一个“active”类，以突出显示当前页面的选项。

总结

在本文中，我们讨论了如何使用Bootstrap和AngularJS设置navbar活动类。首先，我们编写了一个AngularJS指令，在选项单击时添加一个“active”类。然后，我们在HTML模板中使用指令来添加活动类。通过使用这个简单的指令，我们可以在网站的导航栏中标记活动选项，让用户更容易地了解他们所在的页面。