fix(uiSrefActive): optionally match child states

This issue provides support for optionally counting a link as active if any of its child states are
active and parameters match.

Closes angular-ui#818

src/stateDirectives.js

@@ -147,13 +147,21 @@ function $StateActiveDirective($state, $stateParams, $interpolate) {
 
  // Update route state
  function update() {
- if ($state.$current.self === state && matchesParams()) {
+ if (isMatch()) {
  $element.addClass(activeClass);
  } else {
  $element.removeClass(activeClass);
  }
  }
 
+ function isMatch() {
+ if (typeof $attrs.asParent !== 'undefined') {
+ return $state.includes(state.name) && matchesParams();
+ } else {
+ return $state.$current.self === state && matchesParams();
+ }
+ }
+
  function matchesParams() {
  return !params || equalForKeys(params, $stateParams);
  }

test/stateDirectivesSpec.js

@@ -278,6 +278,8 @@ describe('uiSrefActive', function() {
  url: '/:id',
  }).state('contacts.item.detail', {
  url: '/detail/:foo'
+ }).state('contacts.item.edit', {
+ url: '/edit'
  });
  }));
 
@@ -316,6 +318,20 @@ describe('uiSrefActive', function() {
  expect(angular.element(template[0].querySelector('a')).attr('class')).toBe('');
  }));
 
+ it('should match child states when asParent attribute is used', inject(function($rootScope, $q, $compile, $state) {
+ template = $compile('<div><a ui-sref="contacts.item({ id: 1 })" ui-sref-active="active" as-parent>Contacts</a></div>')($rootScope);
+ $rootScope.$digest();
+ var a = angular.element(template[0].getElementsByTagName('a')[0]);
+
+ $state.transitionTo('contacts.item.edit', { id: 1 });
+ $q.flush();
+ expect(a.attr('class')).toMatch(/active/);
+
+ $state.transitionTo('contacts.item.edit', { id: 4 });
+ $q.flush();
+ expect(a.attr('class')).not.toMatch(/active/);
+ }));
+
  it('should resolve relative state refs', inject(function($rootScope, $q, $compile, $state) {
  el = angular.element('<section><div ui-view></div></section>');
  template = $compile(el)($rootScope);