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

要使用AngularJS设置活动标签样式，我们需要使用isActive和ng-controller方法。

方法1：

AngularJS中的ng-controller指令用于向应用程序添加控制器。它可用于添加可以在某些事件(例如click等)上调用的方法，函数和变量，以执行某些操作。

句法：

 Contents... 

下面的示例实现了上述方法：

让我们通过一个简单的代码来看一下。这是最简单的方法之一。

范例1：

     
    
        
            
                
                  Geeks For Geeks
                
                  HTML
                
                  JAVASCRIPT
            
        
        
        
            function HeaderController($scope, $location) {
                $scope.isActive = function (viewLocation) {
                    return viewLocation === $location.path();
                };
            }
        
    

输出：

方法2：

在这里，我们将使用 在Angular JS中使用模块化函数来创建模块。使用AngularJS函数angular.module创建一个模块。

创建模块的语法：

...

var app = angular.module("myFirstApp", []);
 
//myFirstApp refers to HTML element in which application runs.

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

var my_app = angular.module("myFirstApp", []);
my_app.directive("DirectiveApp", function() {
  return {
    template : "Hello Geeks!!!"
  };
});

范例2：

    
        Geeks For Geeks
        HTML
         JAVASCRIPT
     
    
        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);
                           }
                       });
                   }
               };
          }]);
    

输出：