Para establecer un estilo de pestaña activo usando AngularJS , necesitamos usar isActive y el método ng-controller .
Método 1:
La directiva ng-controller en AngularJS se usa para agregar un controlador a la aplicación. Se puede usar para agregar métodos, funciones y variables que se pueden llamar en algún evento como hacer clic, etc. para realizar cierta acción.
Sintaxis:
<element ng-controller="expression"> Contents... </element>
El siguiente ejemplo implementa el enfoque anterior:
Veamos esto a través de un código simple. Esta es una de las formas más sencillas de hacerlo.
Ejemplo 1:
<!DOCTYPE html>
<html>
<head> </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>
Producción:
Método 2:
Aquí usaremos la función modular en Angular JS para crear un módulo. Un módulo se crea usando la función angular.module de AngularJS .
Sintaxis para crear un módulo:
<div ng-app="myFirstApp">...</div>
<script>
var app = angular.module("myFirstApp", []);
//myFirstApp refers to HTML element in which application runs.
</script>
Sintaxis para agregar una directiva al módulo:
<div ng-app="myApp"></div>
<script>
var my_app = angular.module("myFirstApp", []);
my_app.directive("DirectiveApp", function() {
return {
template : "Hello Geeks!!!"
};
});
</script>
Ejemplo 2:
<!DOCTYPE html>
<html>
<head>
</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>
Producción:
Publicación traducida automáticamente
Artículo escrito por atharvapaliwal7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA