feat(uiSrefActive): Also activate for child states.

To limit activation to target state use new ui-sref-active-equals directive'

Breaking Change: Since ui-sref-active now activates even when child states are active you may need to swap out your ui-sref-active with ui-sref-active-equals, thought typically we think devs want the auto inheritance.

Fixes #818

Author: timkindberg

src/stateDirectives.js

@@ -80,7 +80,7 @@ function $StateRefDirective($state, $timeout) {
 
   return {
     restrict: 'A',
-    require: '?^uiSrefActive',
+    require: ['?^uiSrefActive', '?^uiSrefActiveEquals'],
     link: function(scope, element, attrs, uiSrefActive) {
       var ref = parseStateRef(attrs.uiSref);
       var params = null, url = null, base = stateContext(element) || $state.$current;
@@ -103,8 +103,9 @@ function $StateRefDirective($state, $timeout) {
 
         var newHref = $state.href(ref.state, params, options);
 
-        if (uiSrefActive) {
-          uiSrefActive.$$setStateInfo(ref.state, params);
+        var activeDirective = uiSrefActive[1] || uiSrefActive[0];
+        if (activeDirective) {
+          activeDirective.$$setStateInfo(ref.state, params);
         }
         if (!newHref) {
           nav = false;
@@ -148,12 +149,19 @@ function $StateRefDirective($state, $timeout) {
  * @restrict A
  *
  * @description
- * A directive working alongside ui-sref to add classes to an element when the 
+ * A directive working alongside ui-sref to add classes to an element when the
  * related ui-sref directive's state is active, and removing them when it is inactive.
- * The primary use-case is to simplify the special appearance of navigation menus 
+ * The primary use-case is to simplify the special appearance of navigation menus
  * relying on `ui-sref`, by having the "active" state's menu button appear different,
  * distinguishing it from the inactive menu items.
  *
+ * ui-sref-active can live on the same element as ui-sref or on a parent element. The first
+ * one found will be used.
+ *
+ * Only activates when the ui-sref's actual target state is active, *not* any of it's children.
+ * For adding a class based on active children use
+ * {@link ui.router.state.directive:ui-sref-active-equals ui-sref-active-equals}
+ *
  * @example
  * Given the following template:
  * <pre>
@@ -163,8 +171,8 @@ function $StateRefDirective($state, $timeout) {
  *   </li>
  * </ul>
  * </pre>
- * 
- * When the app state is "app.user", and contains the state parameter "user" with value "bilbobaggins", 
+ *
+ * When the app state is "app.user", and contains the state parameter "user" with value "bilbobaggins",
  * the resulting HTML will appear as (note the 'active' class):
  * <pre>
  * <ul>
@@ -173,10 +181,10 @@ function $StateRefDirective($state, $timeout) {
  *   </li>
  * </ul>
  * </pre>
- * 
- * The class name is interpolated **once** during the directives link time (any further changes to the 
- * interpolated value are ignored). 
- * 
+ *
+ * The class name is interpolated **once** during the directives link time (any further changes to the
+ * interpolated value are ignored).
+ *
  * Multiple classes may be specified in a space-separated format:
  * <pre>
  * <ul>
@@ -186,18 +194,37 @@ function $StateRefDirective($state, $timeout) {
  * </ul>
  * </pre>
  */
-$StateActiveDirective.$inject = ['$state', '$stateParams', '$interpolate'];
-function $StateActiveDirective($state, $stateParams, $interpolate) {
-  return {
+
+/**
+ * @ngdoc directive
+ * @name ui.router.state.directive:ui-sref-active-equals
+ *
+ * @requires ui.router.state.$state
+ * @requires ui.router.state.$stateParams
+ * @requires $interpolate
+ *
+ * @restrict A
+ *
+ * @description
+ * The same as {@link ui.router.state.directive:ui-sref-active ui-sref-active} but will also activate
+ * when any descendant state of the ui-sref's target is active. It uses `$state.includes(uiSrefState)`
+ * to check for activation.
+ *
+ */
+$StateRefActiveDirective.$inject = ['$state', '$stateParams', '$interpolate'];
+function $StateRefActiveDirective($state, $stateParams, $interpolate) {
+  return  {
     restrict: "A",
-    controller: ['$scope', '$element', '$attrs', function($scope, $element, $attrs) {
+    controller: ['$scope', '$element', '$attrs', function ($scope, $element, $attrs) {
       var state, params, activeClass;
 
       // There probably isn't much point in $observing this
-      activeClass = $interpolate($attrs.uiSrefActive || '', false)($scope);
+      // uiSrefActive and uiSrefActiveEquals share the same directive object with some
+      // slight difference in logic routing
+      activeClass = $interpolate($attrs.uiSrefActiveEquals || $attrs.uiSrefActive || '', false)($scope);
 
-      // Allow uiSref to communicate with uiSrefActive
-      this.$$setStateInfo = function(newState, newParams) {
+      // Allow uiSref to communicate with uiSrefActive[Equals]
+      this.$$setStateInfo = function (newState, newParams) {
         state = $state.get(newState, stateContext($element));
         params = newParams;
         update();
@@ -207,13 +234,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.uiSrefActiveEquals !== 'undefined') {
+          return $state.$current.self === state && matchesParams();
+        } else {
+          return $state.includes(state.name) && matchesParams();
+        }
+      }
+
       function matchesParams() {
         return !params || equalForKeys(params, $stateParams);
       }
@@ -223,4 +258,5 @@ function $StateActiveDirective($state, $stateParams, $interpolate) {
 
 angular.module('ui.router.state')
   .directive('uiSref', $StateRefDirective)
-  .directive('uiSrefActive', $StateActiveDirective);
+  .directive('uiSrefActive', $StateRefActiveDirective)
+  .directive('uiSrefActiveEquals', $StateRefActiveDirective);

test/stateDirectivesSpec.js

@@ -304,6 +304,8 @@ describe('uiSrefActive', function() {
       url: '/:id',
     }).state('contacts.item.detail', {
       url: '/detail/:foo'
+    }).state('contacts.item.edit', {
+      url: '/edit'
     });
   }));
 
@@ -312,17 +314,17 @@ describe('uiSrefActive', function() {
   }));
 
   it('should update class for sibling uiSref', inject(function($rootScope, $q, $compile, $state) {
-    el = angular.element('<div><a ui-sref="contacts" ui-sref-active="active">Contacts</a></div>');
+    el = angular.element('<div><a ui-sref="contacts.item({ id: 1 })" ui-sref-active="active">Contacts</a><a ui-sref="contacts.item({ id: 2 })" ui-sref-active="active">Contacts</a></div>');
     template = $compile(el)($rootScope);
     $rootScope.$digest();
 
     expect(angular.element(template[0].querySelector('a')).attr('class')).toBe('');
-    $state.transitionTo('contacts');
+    $state.transitionTo('contacts.item', { id: 1 });
     $q.flush();
 
     expect(angular.element(template[0].querySelector('a')).attr('class')).toBe('active');
 
-    $state.transitionTo('contacts.item', { id: 5 });
+    $state.transitionTo('contacts.item', { id: 2 });
     $q.flush();
     expect(angular.element(template[0].querySelector('a')).attr('class')).toBe('');
   }));
@@ -342,6 +344,34 @@ describe('uiSrefActive', function() {
     expect(angular.element(template[0].querySelector('a')).attr('class')).toBe('');
   }));
 
+  it('should match on child states', inject(function($rootScope, $q, $compile, $state) {
+    template = $compile('<div><a ui-sref="contacts.item({ id: 1 })" ui-sref-active="active">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 NOT match on child states when active-equals is used', inject(function($rootScope, $q, $compile, $state) {
+    template = $compile('<div><a ui-sref="contacts.item({ id: 1 })" ui-sref-active-equals="active">Contacts</a></div>')($rootScope);
+    $rootScope.$digest();
+    var a = angular.element(template[0].getElementsByTagName('a')[0]);
+
+    $state.transitionTo('contacts.item', { id: 1 });
+    $q.flush();
+    expect(a.attr('class')).toMatch(/active/);
+
+    $state.transitionTo('contacts.item.edit', { id: 1 });
+    $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);