From 5bd9e148a061300e1bb3a8c9dc02fcff4415b8af Mon Sep 17 00:00:00 2001
From: Lee Tunnicliffe <lee.tunnicliffe@googlemail.com>
Date: Thu, 15 May 2014 12:41:26 +0100
Subject: [PATCH] fix(uiSref): fix to uiSref when using dynamic state names

Fix to ensure href updates when the state name or the params change as
opposed to just the params.

Closes #395
---
 src/stateDirectives.js      |  5 +++++
 test/stateDirectivesSpec.js | 31 +++++++++++++++++++++++++++++++
 2 files changed, 36 insertions(+)

diff --git a/src/stateDirectives.js b/src/stateDirectives.js
index be0497d5f..3929fec10 100644
--- a/src/stateDirectives.js
+++ b/src/stateDirectives.js
@@ -115,6 +115,11 @@ function $StateRefDirective($state, $timeout) {
         element[0][attr] = newHref;
       };
 
+      attrs.$observe('uiSref', function(newVal) {
+        ref = parseStateRef(newVal);
+        update();
+      });
+
       if (ref.paramExpr) {
         scope.$watch(ref.paramExpr, function(newVal, oldVal) {
           if (newVal !== params) update(newVal);
diff --git a/test/stateDirectivesSpec.js b/test/stateDirectivesSpec.js
index da21806b4..11a852457 100644
--- a/test/stateDirectivesSpec.js
+++ b/test/stateDirectivesSpec.js
@@ -240,6 +240,37 @@ describe('uiStateRef', function() {
     }));
   });
 
+  describe('links with dynamic state name', function() {
+    var timeoutFlush;
+
+    beforeEach(inject(function($rootScope, $compile, $timeout) {
+      el = angular.element('<a ui-sref="{{state.name}}({ id: contact.id })">Details</a>');
+      scope = $rootScope;
+      scope.contact = { id: 5 };
+      scope.state = { name: 'contacts' };
+      scope.$apply();
+
+      $compile(el)(scope);
+      scope.$digest();
+
+      timeoutFlush = function() {
+        try {
+          $timeout.flush();
+        } catch (e) {
+          // Angular 1.0.8 throws 'No deferred tasks to be flushed' if there is nothing in queue.
+          // Behave as Angular >=1.1.5 and do nothing in such case.
+        }
+      }
+    }));
+
+    it('should update the href when the state name changes', function() {
+      expect(el.attr('href')).toBe('#/contacts');
+      scope.state.name = 'contacts.item';
+      scope.$apply();
+      expect(el.attr('href')).toBe('#/contacts/5');
+    });
+  });
+
   describe('forms', function() {
     var el, scope;