Merge pull request #1884 from kasperlewau/ui-sref-active-lazy

fix(uiSrefActive): Apply active classes on lazy loaded states

Author: nateabele

src/stateDirectives.js

@@ -239,13 +239,13 @@ function $StateRefActiveDirective($state, $stateParams, $interpolate) {
       // Allow uiSref to communicate with uiSrefActive[Equals]
       this.$$addStateInfo = function (newState, newParams) {
         var state = $state.get(newState, stateContext($element));
-        if (state) {
-          states.push({
-            state: state,
-            params: newParams
-          });
-          update();
-        }
+
+        states.push({
+          state: state || { name: newState },
+          params: newParams
+        });
+
+        update();
       };
 
       $scope.$on('$stateChangeSuccess', update);

test/stateDirectivesSpec.js

@@ -392,11 +392,12 @@ describe('uiStateRef', function() {
 });
 
 describe('uiSrefActive', function() {
-    var el, template, scope, document;
+  var el, template, scope, document, _stateProvider;
 
   beforeEach(module('ui.router'));
 
   beforeEach(module(function($stateProvider) {
+    _stateProvider = $stateProvider;
     $stateProvider.state('top', {
       url: ''
     }).state('contacts', {
@@ -511,6 +512,42 @@ describe('uiSrefActive', function() {
     $q.flush();
     expect(angular.element(template[0]).attr('class')).toBe('ng-scope active');
   }));
+
+  it('should match fuzzy on lazy loaded states', inject(function($rootScope, $q, $compile, $state) {
+    el = angular.element('<div><a ui-sref="contacts.lazy" ui-sref-active="active">Lazy Contact</a></div>');
+    template = $compile(el)($rootScope);
+    $rootScope.$digest();
+
+    $rootScope.$on('$stateNotFound', function () {
+      _stateProvider.state('contacts.lazy', {});
+    });
+
+    $state.transitionTo('contacts.item', { id: 1 });
+    $q.flush();
+    expect(angular.element(template[0].querySelector('a')).attr('class')).toBe('');
+
+    $state.transitionTo('contacts.lazy');
+    $q.flush();
+    expect(angular.element(template[0].querySelector('a')).attr('class')).toBe('active');
+  }));
+
+  it('should match exactly on lazy loaded states', inject(function($rootScope, $q, $compile, $state) {
+    el = angular.element('<div><a ui-sref="contacts.lazy" ui-sref-active-eq="active">Lazy Contact</a></div>');
+    template = $compile(el)($rootScope);
+    $rootScope.$digest();
+
+    $rootScope.$on('$stateNotFound', function () {
+      _stateProvider.state('contacts.lazy', {});
+    });
+
+    $state.transitionTo('contacts.item', { id: 1 });
+    $q.flush();
+    expect(angular.element(template[0].querySelector('a')).attr('class')).toBe('');
+
+    $state.transitionTo('contacts.lazy');
+    $q.flush();
+    expect(angular.element(template[0].querySelector('a')).attr('class')).toBe('active');
+  }));
 });
 
 describe('uiView controllers or onEnter handlers', function() {