ngclass javascript twitter-bootstrap angularjs angularjs-directive navbar

javascript - ngclass angular 4



¿Cómo configurar la clase activa bootstrap navbar con Angular JS? (25)

Si tengo una barra de navegación en bootstrap con los elementos

Home | About | Contact

¿Cómo configuro la clase activa para cada elemento del menú cuando están activos? Es decir, ¿cómo puedo configurar class="active" cuando la ruta angular está en

  1. #/ para el hogar
  2. #/about de la página acerca de
  3. #/contact para la página de contacto

Acabo de escribir una directiva para manejar esto, así que simplemente puede agregar el atributo bs-active-link al elemento <ul> , y cada vez que cambie la ruta, encontrará el enlace correspondiente y agregará la clase active al <li> correspondiente.

Puedes verlo en acción aquí: http://jsfiddle.net/8mcedv3b/

Ejemplo HTML:

<ul class="nav navbar-nav" bs-active-link> <li><a href="/home">Home</a></li> <li><a href="/contact">Contact</a></li> </ul>

Javascript:

angular.module(''appName'') .directive(''bsActiveLink'', [''$location'', function ($location) { return { restrict: ''A'', //use as attribute replace: false, link: function (scope, elem) { //after the route has changed scope.$on("$routeChangeSuccess", function () { var hrefs = [''/#'' + $location.path(), ''#'' + $location.path(), //html5: false $location.path()]; //html5: true angular.forEach(elem.find(''a''), function (a) { a = angular.element(a); if (-1 !== hrefs.indexOf(a.attr(''href''))) { a.parent().addClass(''active''); } else { a.parent().removeClass(''active''); }; }); }); } } }]);

Aquí hay otra solución para cualquiera que pueda estar interesado. La ventaja de esto es que tiene menos dependencias. Heck, funciona sin un servidor web también. Así que es completamente del lado del cliente.

HTML:

<nav class="navbar navbar-inverse" ng-controller="topNavBarCtrl""> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#"><span class="glyphicon glyphicon-home" aria-hidden="true"></span></a> </div> <ul class="nav navbar-nav"> <li ng-click="selectTab()" ng-class="getTabClass()"><a href="#">Home</a></li> <li ng-repeat="tab in tabs" ng-click="selectTab(tab)" ng-class="getTabClass(tab)"><a href="#">{{ tab }}</a></li> </ul> </div>

Explicación:

Aquí estamos generando los enlaces dinámicamente desde un modelo angularjs usando la directiva ng-repeat . La magia ocurre con los métodos selectTab() y getTabClass() definidos en el controlador para esta barra de navegación que se presenta a continuación.

Controlador:

angular.module("app.NavigationControllersModule", []) // Constant named ''activeTab'' holding the value ''active''. We will use this to set the class name of the <li> element that is selected. .constant("activeTab", "active") .controller("topNavBarCtrl", function($scope, activeTab){ // Model used for the ng-repeat directive in the template. $scope.tabs = ["Page 1", "Page 2", "Page 3"]; var selectedTab = null; // Sets the selectedTab. $scope.selectTab = function(newTab){ selectedTab = newTab; }; // Sets class of the selectedTab to ''active''. $scope.getTabClass = function(tab){ return selectedTab == tab ? activeTab : ""; }; });

Explicación:

selectTab() método selectTab() se llama usando la directiva ng-click . Entonces, cuando se hace clic en el enlace, la variable selectedTab se establece en el nombre de este enlace. En el HTML puede ver que se llama a este método sin ningún argumento para la pestaña Inicio, de modo que se resaltará cuando se cargue la página.

El método getTabClass() se llama a través ng-class directiva ng-class en el HTML. Este método verifica si la pestaña en la que se encuentra es el mismo que el valor de la variable selectedTab . Si es verdadero, devuelve "activo"; de lo contrario, devuelve "", que se aplica como nombre de clase mediante la directiva ng-class . Entonces cualquier css que haya aplicado a la clase active se aplicará a la pestaña seleccionada.

Aquí hay un enfoque simple que funciona bien con Angular.

<ul class="nav navbar-nav"> <li ng-class="{ active: isActive(''/View1'') }"><a href="#/View1">View 1</a></li> <li ng-class="{ active: isActive(''/View2'') }"><a href="#/View2">View 2</a></li> <li ng-class="{ active: isActive(''/View3'') }"><a href="#/View3">View 3</a></li> </ul>

Dentro de su controlador AngularJS:

$scope.isActive = function (viewLocation) { var active = (viewLocation === $location.path()); return active; };

En primer lugar, este problema se puede resolver de muchas maneras. De esta manera puede que no sea el más elegante, pero ciertamente funciona.

Aquí hay una solución simple que debería poder agregar a cualquier proyecto. Puede simplemente agregar una "clave de página" o alguna otra propiedad cuando configure la ruta que puede usar para eliminar. Además, puede implementar una escucha en el método $ routeChangeSuccess del objeto $ route para escuchar la finalización exitosa de un cambio de ruta.

Cuando su controlador se dispara, obtiene la clave de la página y la utiliza para ubicar los elementos que deben estar "ACTIVOS" para esta página, y aplica la clase ACTIVA.

Tenga en cuenta que necesita una forma de hacer que TODOS los elementos "IN ACTIVE". Como puede ver, estoy usando la clase .pageKey en mis elementos de navegación para desactivarlos todos, y estoy usando .pageKey_ {PAGEKEY} para activarlos individualmente. Cambiarlos a inactivos, se consideraría un enfoque ingenuo, posiblemente obtendría un mejor rendimiento al usar la ruta anterior para hacer que solo los elementos activos estén inactivos, o podría alterar el selector de jQuery para seleccionar solo los elementos activos que se van a desactivar. El uso de jquery para seleccionar todos los elementos activos es probablemente la mejor solución, ya que garantiza que todo esté limpio para la ruta actual en caso de cualquier error css que pudiera haber estado presente en la ruta anterior.

Lo que significaría cambiar esta línea de código:

$(".pagekey").toggleClass("active", false);

a este

$(".active").toggleClass("active", false);

Aquí hay un código de ejemplo:

Dada una barra de navegación bootstrap de

<div class="navbar navbar-inverse"> <div class="navbar-inner"> <a class="brand" href="#">Title</a> <ul class="nav"> <li><a href="#!/" class="pagekey pagekey_HOME">Home</a></li> <li><a href="#!/page1/create" class="pagekey pagekey_CREATE">Page 1 Create</a></li> <li><a href="#!/page1/edit/1" class="pagekey pagekey_EDIT">Page 1 Edit</a></li> <li><a href="#!/page1/published/1" class="pagekey pagekey_PUBLISH">Page 1 Published</a></li> </ul> </div> </div>

Y un módulo angular y controlador como el siguiente:

<script type="text/javascript"> function Ctrl($scope, $http, $routeParams, $location, $route) { } angular.module(''BookingFormBuilder'', []). config(function ($routeProvider, $locationProvider) { $routeProvider. when(''/'', { template: ''I/'m on the home page'', controller: Ctrl, pageKey: ''HOME'' }). when(''/page1/create'', { template: ''I/'m on page 1 create'', controller: Ctrl, pageKey: ''CREATE'' }). when(''/page1/edit/:id'', { template: ''I/'m on page 1 edit {id}'', controller: Ctrl, pageKey: ''EDIT'' }). when(''/page1/published/:id'', { template: ''I/'m on page 1 publish {id}'', controller: Ctrl, pageKey: ''PUBLISH'' }). otherwise({ redirectTo: ''/'' }); $locationProvider.hashPrefix("!"); }).run(function ($rootScope, $http, $route) { $rootScope.$on("$routeChangeSuccess", function (angularEvent, currentRoute, previousRoute) { var pageKey = currentRoute.pageKey; $(".pagekey").toggleClass("active", false); $(".pagekey_" + pageKey).toggleClass("active", true); }); }); </script>

Encuentro todas estas respuestas un poco complicadas para mí, lo siento. Así que he creado una pequeña directiva que debería funcionar según la base de la barra de navegación:

app.directive(''activeLink'', function () { return { link: function (scope, element, attrs) { element.find(''.nav a'').on(''click'', function () { angular.element(this) .parent().siblings(''.active'') .removeClass(''active''); angular.element(this) .parent() .addClass(''active''); }); } }; });

Uso:

<ul class="nav navbar-nav navbar-right" active-link> <li class="nav active"><a href="home">Home</a></li> <li class="nav"><a href="foo">Foo</a></li> <li class="nav"><a href="bar">Bar</a></li> </ul>

Esta es una solución simple.

<ul class="nav navbar-nav navbar-right navbar-default menu"> <li ng-class="menuIndice == 1 ? ''active'':''''"> <a ng-click="menuIndice = 1" href="#/item1">item1</a> </li> <li ng-class="menuIndice == 2 ? ''active'':''''"> <a ng-click="menuIndice = 2" href="#/item2">item2</a> </li> <li ng-class="menuIndice == 3 ? ''active'':''''"> <a ng-click="menuIndice = 3" href="#/item3">item3</a> </li> </ul>

Esto es una respuesta larga, pero pensé que iba a compartir mi camino:

.run(function($rootScope, $state){ $rootScope.$state = $state; });

Modelo:

<ul class="nav navbar-nav"> <li ng-class="{ active: $state.contains(''View1'') }"><a href="...">View 1</a></li> <li ng-class="{ active: $state.contains(''View2'') }"><a href="...">View 2</a></li> <li ng-class="{ active: $state.contains(''View3'') }"><a href="...">View 3</a></li> </ul>

Para aquellos que usan ui-router :

<ul class="nav navbar-nav"> <li ui-sref-active="active"><a href="...">View 1</a></li> <li ui-sref-active="active"><a href="...">View 2</a></li> <li ui-sref-active="active"><a href="...">View 3</a></li> </ul>

Para una coincidencia exacta (por ejemplo, estados anidados?) $state.name === ''full/path/to/state'' o ui-sref-active-eq="active"

Esto hizo el truco para mí:

var domain = ''{{ DOMAIN }}''; // www.example.com or dev.example.com var domain_index = window.location.href.indexOf(domain); var long_app_name = window.location.href.slice(domain_index+domain.length+1); // this turns http://www.example.com/whatever/whatever to whatever/whatever app_name = long_app_name.slice(0, long_app_name.indexOf(''/'')); //now you are left off with just the first whatever which is usually your app name

luego usas jquery (también funciona con angular) para agregar una clase activa

$(''nav a[href*="'' + app_name+''"]'').closest(''li'').addClass(''active'');

y por supuesto el css:

.active{background:red;}

esto funciona si tienes tu html como este:

<ul><li><a href="/ee">ee</a></li><li><a href="/dd">dd</a></li></ul>

esto agregará automáticamente la clase activa usando la URL de la página y coloreará el fondo a rojo si está en www.somesite.com/ee thaen ee es la ''aplicación'' y estará activa

Extendiendo mi respuesta, necesitaba esto para manejar una estructura como esta.

-índice

-eventos <-activos
---lista de eventos
--- edición de eventos
--- mapa de eventos <-clicado

-placas
--- lista de lugares
--- edición de lugar
--- mapa de lugar

así que en lugar de hacer coincidir, tuve que usar indexOf, para validar los enlaces secundarios que están formateados para cumplir la condición. Así que para ''eventos'':

<li ng-class="{ active: isActive(''/event'')}" class="divider-vertical dropdown"> function NavController($scope, $location) { $scope.isActive = function (viewLocation) { var s=false; if($location.path().indexOf(viewLocation) != -1){ s = true; } return s; };}

Gracias a @Pylinux . He utilizado su técnica y también la modifiqué para admitir el nivel "uno" del menú desplegable (sub ul / li), ya que eso es lo que necesitaba. Véalo en acción en el siguiente enlace de violín.

Fiddle actualizado basado en la respuesta de pylinux - http://jsfiddle.net/abhatia/en4qxw6g/

Hice los siguientes tres cambios para poder admitir un menú desplegable de un nivel:
1. Se agregó un valor de clase de dd (menú desplegable) para el elemento "a" debajo de li que necesita tener una lista de ul ul.

<li><a class="dd">This link points to #/fun5</a> <ul> <li><a href="#/fun6?some=data">This link points to #/fun6</a> </li> <li><a href="#/fun7?some=data">This link points to #/fun7</a> </li> <li><a href="#/fun8?some=data">This link points to #/fun8</a> </li> <li><a href="#/fun9?some=data">This link points to #/fun9</a> </li> </ul> </li>


2. Javascript actualizado para agregar la siguiente nueva lógica.

if(angular.element(li).parent().parent().children(''a'').hasClass("dd")) {angular.element(li).parent().parent().children(''a.dd'').addClass(''active'');}


3. CSS actualizado para agregar lo siguiente:

a.active {background-color:red;}

Esperamos que esto sea útil para alguien que busca implementar un menú desplegable de un solo nivel.

Heres mi toma en ello. Un poco de una combinación de respuestas que se encuentran en este post. Tuve un caso ligeramente diferente, por lo que mi solución consiste en separar el menú en su propia plantilla para que se use dentro de la Definición de la Directiva y luego agregar mi barra de navegación a la página en la que lo necesitaba. Básicamente, tenía una página de inicio de sesión en la que no quería incluir mi menú, así que utilicé ngInclude e inserté esta directiva cuando inicié sesión:

DIRECTIVA:

module.directive(''compModal'', function(){ return { restrict: ''E'', replace: true, transclude: true, scope: true, templateUrl: ''templates/menu.html'', controller: function($scope, $element, $location){ $scope.isActive = function(viewLocation){ var active = false; if(viewLocation === $location.path()){ active = true; } return active; } } } });

PLANTILLA DIRECTIVA (templates / menu.html)

<ul class="nav navbar-nav"> <li ng-class="{ active: isActive(''/View1'') }"><a href="#/View1">View 1</a></li> <li ng-class="{ active: isActive(''/View2'') }"><a href="#/View2">View 2</a></li> <li ng-class="{ active: isActive(''/View3'') }"><a href="#/View3">View 3</a></li> </ul>

HTML QUE INCLUYE LA DIRECTIVA

<comp-navbar/>

Espero que esto ayude

Junto con la respuesta AngularStrap de @ Olivier, también implementé la respuesta de kevinknelson desde: https://github.com/twbs/bootstrap/issues/9013 .

De forma nativa, la barra de navegación de Bootstrap3 no se diseñó para una aplicación de una sola página (por ejemplo, Angular) y, por lo tanto, el menú cuando en una pantalla pequeña no se colapsaba al hacer clic.

Puede echar un vistazo a AngularStrap , la directiva de la barra de navegación parece ser lo que está buscando:

https://github.com/mgcrea/angular-strap/blob/master/src/navbar/navbar.js

.directive(''bsNavbar'', function($location) { ''use strict''; return { restrict: ''A'', link: function postLink(scope, element, attrs, controller) { // Watch for the $location scope.$watch(function() { return $location.path(); }, function(newValue, oldValue) { $(''li[data-match-route]'', element).each(function(k, li) { var $li = angular.element(li), // data(''match-rout'') does not work with dynamic attributes pattern = $li.attr(''data-match-route''), regexp = new RegExp(''^'' + pattern + ''$'', [''i'']); if(regexp.test(newValue)) { $li.addClass(''active''); } else { $li.removeClass(''active''); } }); }); } }; });

Para utilizar esta directiva:

  1. Descargue AngularStrap desde http://mgcrea.github.io/angular-strap/

  2. Incluya el script en su página después de bootstrap.js:
    <script src="lib/angular-strap.js"></script>

  3. Añade las directivas a tu módulo:
    angular.module(''myApp'', [''$strap.directives''])

  4. Agregue la directiva a su barra de navegación:
    <div class="navbar" bs-navbar>

  5. Agregue expresiones regulares en cada elemento de navegación:
    <li data-match-route="/about"><a href="#/about">About</a></li>

Puedes lograr esto con un condicional en una expresión angular, como por ejemplo:

<a href="#" class="{{ condition ? ''active'' : '''' }}">link</a>

Dicho esto, creo que una directiva angular es la forma más "adecuada" de hacerlo, aunque la subcontratación de gran parte de esta mini lógica puede contaminar un poco su código base.

Uso condicionales para el estilo de GUI de vez en cuando durante el desarrollo, porque es un poco más rápido que crear directivas. No podría decirles una instancia, aunque en realidad permanecieron en la base del código por mucho tiempo. Al final, lo convierto en una directiva o encuentro una mejor manera de resolver el problema.

Puedes usar angular-ui-utils directiva ui-route angular-ui-utils :

<a ui-route ng-href="/">Home</a> <a ui-route ng-href="/about">About</a> <a ui-route ng-href="/contact">Contact</a>

o:

Controlador de encabezado

/** * Header controller */ angular.module(''myApp'') .controller(''HeaderCtrl'', function ($scope) { $scope.menuItems = [ { name: ''Home'', url: ''/'', title: ''Go to homepage.'' }, { name: ''About'', url: ''/about'', title: ''Learn about the project.'' }, { name: ''Contact'', url: ''/contact'', title: ''Contact us.'' } ]; });

Página de inicio

<!-- index.html: --> <div class="header" ng-controller="HeaderCtrl"> <ul class="nav navbar-nav navbar-right"> <li ui-route="{{menuItem.url}}" ng-class="{active: $uiRoute}" ng-repeat="menuItem in menuItems"> <a ng-href="#{{menuItem.url}}" title="{{menuItem.title}}"> {{menuItem.name}} </a> </li> </ul> </div>

Si está utilizando ui-utils, es posible que también le interese el ui-router para administrar vistas parciales / anidadas.

Si está trabajando con un enrutador angular, la directiva RouterLinkActive se puede usar con mucha elegancia:

<ul class="navbar-nav"> <li class="nav-item"><a class="nav-link" routerLink="home" routerLinkActive="active">Home</a></li> <li class="nav-item"><a class="nav-link" routerLink="gallery" routerLinkActive="active">Gallery</a></li> <li class="nav-item"><a class="nav-link" routerLink="pricing" routerLinkActive="active">Prices</a></li> <li class="nav-item"><a class="nav-link" routerLink="contact" routerLinkActive="active">Contact</a></li> </ul>

Si prefiere no utilizar http://mgcrea.github.io/angular-strap/ , esta directiva debería hacer el truco. Esta es una modificación de https://.com/a/16231859/910764 .

JavaScript

angular.module(''myApp'').directive(''bsNavbar'', [''$location'', function ($location) { return { restrict: ''A'', link: function postLink(scope, element) { scope.$watch(function () { return $location.path(); }, function (path) { angular.forEach(element.children(), (function (li) { var $li = angular.element(li), regex = new RegExp(''^'' + $li.attr(''data-match-route'') + ''$'', ''i''), isActive = regex.test(path); $li.toggleClass(''active'', isActive); })); }); } }; }]);

HTML

<ul class="nav navbar-nav" bs-navbar> <li data-match-route="/home"><a href="#/home">Home</a></li> <li data-match-route="/about"><a href="#/about">About</a></li> </ul>

Nota: las clases de HTML anteriores suponen que estás usando Bootstrap 3.x

Si usa ui-router , el siguiente ejemplo debe satisfacer sus necesidades en función del comentario de @ DanPantry sobre la respuesta aceptada sin agregar ningún código del lado del controlador:

<div class="collapse navbar-collapse" ng-controller="HeaderController"> <ul class="nav navbar-nav"> <li ui-sref-active="active"><a ui-sref="app.home()" href="/">Home</a></li> <li ui-sref-active="active"><a ui-sref="app.dogs()" href="/dogs">Dogs</a></li> <li ui-sref-active="active"><a ui-sref="app.cats()" href="/cats">Cats</a></li> </ul> </div> <div ng-view></div>

Puede consultar los docs para obtener más información sobre él.

Solo para agregar mis dos centavos en el debate, he creado un módulo angular puro (sin jQuery), y también funcionará con URL de hash que contienen datos. ( i.g. #/this/is/path?this=is&some=data )

Simplemente agregue el módulo como una dependencia y se auto-active a uno de los ancestros del menú. Me gusta esto:

<ul auto-active> <li><a href="#/">main</a></li> <li><a href="#/first">first</a></li> <li><a href="#/second">second</a></li> <li><a href="#/third">third</a></li> </ul>

Y el módulo se ve así:

(function () { angular.module(''autoActive'', []) .directive(''autoActive'', [''$location'', function ($location) { return { restrict: ''A'', scope: false, link: function (scope, element) { function setActive() { var path = $location.path(); if (path) { angular.forEach(element.find(''li''), function (li) { var anchor = li.querySelector(''a''); if (anchor.href.match(''#'' + path + ''(?=//?|$)'')) { angular.element(li).addClass(''active''); } else { angular.element(li).removeClass(''active''); } }); } } setActive(); scope.$on(''$locationChangeSuccess'', setActive); } } }]); }());

* (Por supuesto, puedes usar la parte directiva)

** También vale la pena notar que esto no funciona para hashes vacíos ( i.g. example.com/# o solo example.com ) necesita tener al menos example.com/#/ o solo example.com#/ . Pero esto sucede automáticamente con ngResource y similares.

Solo tendrá que agregar la clase active requerida con el código de color requerido.

Ej: ng-class="{''active'': currentNavSelected}" ng-click="setNav"

Sugiero usar una directiva en un enlace. Here está el violín.

Pero todavía no es perfecto. Cuidado con los hashbangs;)

Aquí está el javascript para la directiva:

angular.module(''link'', []). directive(''activeLink'', [''$location'', function(location) { return { restrict: ''A'', link: function(scope, element, attrs, controller) { var clazz = attrs.activeLink; var path = attrs.href; path = path.substring(1); //hack because path does not return including hashbang scope.location = location; scope.$watch(''location.path()'', function(newPath) { if (path === newPath) { element.addClass(clazz); } else { element.removeClass(clazz); } }); } }; }]);

Y aquí es cómo se usaría en HTML:

<div ng-app="link"> <a href="#/one" active-link="active">One</a> <a href="#/two" active-link="active">One</a> <a href="#" active-link="active">home</a> </div>

después de peinar con css:

.active{ color:red; }

También puede usar esta directiva de enlace activo https://.com/a/23138152/1387163

Parent li obtendrá clase activa cuando la ubicación coincida / url :

<li> <a href="#!/url" active-link active-link-parent> </li>

Una forma muy elegante es usar ng-controller para ejecutar un solo controlador fuera de ng-view:

<div class="collapse navbar-collapse" ng-controller="HeaderController"> <ul class="nav navbar-nav"> <li ng-class="{ active: isActive(''/'')}"><a href="/">Home</a></li> <li ng-class="{ active: isActive(''/dogs'')}"><a href="/dogs">Dogs</a></li> <li ng-class="{ active: isActive(''/cats'')}"><a href="/cats">Cats</a></li> </ul> </div> <div ng-view></div>

e incluir en controllers.js:

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

Yo uso la directiva ng-class con $ location para lograrlo.

<ul class="nav"> <li data-ng-class="{active: ($location.path() == ''/'') }"> <a href="#/">Carpeta Amarilla</a> </li> <li class="dropdown" data-ng-class="{active: ($location.path() == ''/auditoria'' || $location.path() == ''/auditoria/todos'') }"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> Auditoria <b class="caret"></b> </a> <ul class="dropdown-menu pull-right"> <li data-ng-class="{active: ($location.path() == ''/auditoria'') }"> <a href="#/auditoria">Por Legajo</a> </li> <li data-ng-class="{active: ($location.path() == ''/auditoria/todos'') }"> <a href="#/auditoria/todos">General</a> </li> </ul> </li> </ul>

Requiere que la barra de navegación esté dentro de un Controlador principal con acceso a $ servicio de ubicación como este:

bajasApp.controller(''MenuCntl'', [''$scope'',''$route'', ''$routeParams'', ''$location'', function MenuCntl($scope, $route, $routeParams, $location) { $scope.$route = $route; $scope.$location = $location; $scope.$routeParams = $routeParams; }]);

JavaScript

/** * Main AngularJS Web Application */ var app = angular.module(''yourWebApp'', [ ''ngRoute'' ]); /** * Setup Main Menu */ app.controller(''MainNavCtrl'', [ ''$scope'', ''$location'', function ( $scope, $location) { $scope.menuItems = [ { name: ''Home'', url: ''/home'', title: ''Welcome to our Website'' }, { name: ''ABOUT'', url: ''/about'', title: ''Know about our work culture'' }, { name: ''CONTACT'', url: ''/contact'', title: ''Get in touch with us'' } ]; $scope.isActive = function (viewLocation) { return viewLocation === $location.path(); }; }]);

HTML

<div class="navbar-collapse collapse" ng-controller="MainNavCtrl"> <ul id="add-magic-line" class="nav navbar-nav navbar-right"> <li data-ng-class="{current_page_item: isActive(''{{ menuItem.url }}'')}" data-ng-repeat="menuItem in menuItems"> <a data-ng-href="#{{menuItem.url}}" title="{{menuItem.title}}"> {{menuItem.name}} </a> </li> </ul> </div>