From 2dd65aba1ce4ea8efe289dd4f694fd87ab8c1e8b Mon Sep 17 00:00:00 2001
From: Rodsevich <neton_12@hotmail.com>
Date: Sun, 10 May 2015 21:53:47 -0300
Subject: [PATCH] New Directive for highlighting the active item

A directive that automatically adds the 'active' class to the <li> item that corresponds to the current location of the app
            <top-bar>
                <ul class="title-area">
                    <li class="name">
                    </li>
                </ul>
                <top-bar-section>
                    <ul class="left">
                        <li><a is-active href="#/">Inicio</a></li>
                        <li><a is-active href="#/Vocabulario">Vocabulario</a></li>
                    </ul>
                    <ul class="right">
                        <li><a is-active href="#/Seccion_critica">Secci&oacute;n Cr&iacute;tica</a></li>
                        <li><a is-active href="#/Bloques_control">Bloques de Control</a></li>
                        <li><a is-active href="#/Sincronizacion">Sincronizaci&oacute;n</a></li>
                        <li><a is-active href="#/Semaforos">Sem&aacute;foros</a></li>
                    </ul>
                </top-bar-section>
            </top-bar>
---
 src/topbar/topbar.js | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/src/topbar/topbar.js b/src/topbar/topbar.js
index bcb3fc3..bb172ed 100644
--- a/src/topbar/topbar.js
+++ b/src/topbar/topbar.js
@@ -422,4 +422,20 @@ angular.module("mm.foundation.topbar", ['mm.foundation.mediaQueries'])
       element.prepend($titleLi);
     }
   };
+}])
+.directive('isActive', [ '$location', function($location) {
+  return {
+    restrict: 'A',
+    require: '^topBarSection',
+    link: function(scope, element) {
+      scope.location = $location;
+      scope.$watch('location.path()', function(currentPath) {
+         if('#' + currentPath === element[0].attributes['href'].nodeValue) {
+          element.parent().addClass('active');
+         } else {
+          element.parent().removeClass('active');
+         }
+      });
+    }
+  };
 }]);