如何用AngularJS设置活动标签样式

在这篇文章中，我们将看到如何使用AngularJS设置一个活跃的标签样式，并且还将通过实例了解其实现。这项任务可以通过实现isActive和ng-controller方法来完成。我们将用2种不同的方法来完成这项任务。

方法1：AngularJS中的ng-controller指令用于在应用程序中添加一个控制器。它可以用来添加方法、函数和变量，这些方法、函数和变量可以在一些事件中被调用，比如点击等，以执行某些动作。

语法:

<element ng-controller="expression">
    Contents... 
</element>

下面的例子实现了上述方法。

例子1：这个例子描述了使用AngularJS设置活动标签样式。

<!DOCTYPE html>
<html>
  
<head>
    <title>
          How to set active tab style with AngularJS?
      </title>
</head>
  
<body>
    <div class="collapse navbar-collapse" 
         ng-controller="HeaderController">
        <ul class="nav navbar-nav">
            <li ng-class="{ active: isActive('/')}"> 
                <a href="/">Geeks For Geeks</a> 
            </li>
            <li ng-class="{ active: isActive('/html')}"> 
                <a href="/html">HTML</a>
            </li>
            <li ng-class="{ active: isActive('/js')}"> 
                <a href="/js">JAVASCRIPT</a> 
            </li>
        </ul>
    </div>
    <div ng-view></div>
    <script>
        function HeaderController( $scope,$ location) {
             $scope.isActive = function(viewLocation) { return viewLocation ===$ location.path();
            };
        }
    </script>
</body>
</html>

输出:

如何用AngularJS设置活动标签样式？

方法2：这里我们将使用Angular JS中的 modular函数来创建一个模块。一个模块是通过使用AngularJS函数angular.module.创建的。

语法：用于创建一个模块。

<div ng-app="myFirstApp">...</div>
<script>
var app = angular.module("myFirstApp", []);

//myFirstApp refers to HTML element in which application runs.
</script>

语法：用于向模块添加指令。

<div ng-app="myApp"></div>
<script>
var my_app = angular.module("myFirstApp", []);
my_app.directive("DirectiveApp", function() {
  return {
    template : "Hello Geeks!!!"
  };
});
</script>

例子2：这是另一个例子，描述了使用AngularJS设置活动标签样式。

<!DOCTYPE html>
<html>
  
<head>
    <title>How to set active tab style with AngularJS?</title>
</head>
  
<body>
    <div ng-app="link"> 
        <a href="#Geeks For Geeks" active-link="active">
            Geeks For Geeks
        </a> 
        <a href="#HTML" active-link="active">HTML</a>
        <a href="#JAVASCRIPT" active-link="active">JAVASCRIPT</a> 
    </div>
    <script>
        angular.module('link', []).directive('Link', 
                    [' $location', function(location) { return { link: function(scope, element, attrs) { var active = attrs.activeLink; var path = attrs.href; path = path.substring(1); scope.location = location; scope.$ watch('location.path()', function(newPath) {
                        if(path === newPath) {
                            element.addClass(active);
                        } else {
                            element.removeClass(active);
                        }
                    });
                }
            };
        }]);
    </script>
</body>
</html>

输出:

如何用AngularJS设置活动标签样式？