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

Author: caitp

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);