diff --git a/modules/angular1_router/src/ng_outlet.ts b/modules/angular1_router/src/ng_outlet.ts index f6e346014a..94ebfa8417 100644 --- 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 index 56b613fb6c..22c59e63ac 100644 --- 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('one |
'); + $rootScope.$digest(); + + $rootRouter.navigateByUrl('/'); + $rootScope.$digest(); + + expect(elt.find('a').attr('class')).toBe('ng-link-active'); + })); + function registerComponent(name, template, config) { var controller = function () {};