feat(angular1_router): Add ng-link-active class to active ng-link

brandonroberts · brandonroberts · commit 11e8aa26f60f · 2016-03-04T09:30:58.000Z
Closes #6882
diff --git a/modules/angular1_router/src/ng_outlet.ts b/modules/angular1_router/src/ng_outlet.ts
@@ -257,6 +257,16 @@ function ngLinkDirective($rootRouter, $parse) {
 
     function getLink(params) {
       instruction = router.generate(params);
+
+      scope.$watch(function() { return router.isRouteActive(instruction); },
+                   function(active) {
+                     if (active) {
+                       element.addClass('ng-link-active');
+                     } else {
+                       element.removeClass('ng-link-active');
+                     }
+                   });
+
       return './' + angular.stringifyInstruction(instruction);
     }
 
diff --git a/modules/angular1_router/test/ng_link_spec.js b/modules/angular1_router/test/ng_link_spec.js
@@ -135,6 +135,20 @@ describe('ngLink', function () {
     }).not.toThrow();
   });
 
+  it('should add an ng-link-active class on the current link', inject(function ($rootRouter) {
+    $rootRouter.config([
+      { path: '/', component: 'oneCmp', name: 'One' }
+    ]);
+
+    compile('<a ng-link="[\'/One\']">one</a> | <div ng-outlet></div>');
+    $rootScope.$digest();
+
+    $rootRouter.navigateByUrl('/');
+    $rootScope.$digest();
+
+    expect(elt.find('a').attr('class')).toBe('ng-link-active');
+  }));
+
 
   function registerComponent(name, template, config) {
     var controller = function () {};
