ui-sref should enable relative states & param inheritance

Author: nateabele

src/state.js

@@ -321,8 +321,10 @@ function $StateProvider(   $urlRouterProvider,   $urlMatcherFactory,           $
     };
 
     $state.href = function href(stateOrName, params, options) {
-      options = extend({ lossy: true }, options || {});
-      var state = findState(stateOrName);
+      options = extend({ lossy: true, inherit: false, relative: $state.$current }, options || {});
+      var state = findState(stateOrName, options.relative);
+
+      params = inheritParams($stateParams, params || {}, $state.$current, state);
       var nav = (state && options.lossy) ? state.navigable : state;
       var url = (nav && nav.url) ? nav.url.format(normalize(state.params, params || {})) : null;
       return !$locationProvider.html5Mode() && url ? "#" + url : url;

src/stateDirectives.js

@@ -39,7 +39,7 @@ function $StateRefDirective($state) {
 
       element.bind("click", function(e) {
         if ((e.which == 1) && !e.ctrlKey && !e.metaKey && !e.shiftKey) {
-          $state.transitionTo(ref.state, params);
+          $state.go(ref.state, params);
           scope.$apply();
           e.preventDefault();
         }

test/stateDirectivesSpec.js

@@ -1,5 +1,7 @@
 describe('uiStateRef', function() {
 
+  var el, scope, document;
+
   beforeEach(module('ui.state'));
 
   beforeEach(module(function($stateProvider) {
@@ -12,42 +14,41 @@ describe('uiStateRef', function() {
     }).state('contacts.item.detail', {});
   }));
 
-  describe('links', function() {
-    var el, scope, document;
+  beforeEach(inject(function($document) {
+    document = $document[0];
+  }));
 
-    beforeEach(inject(function($document) {
-      document = $document[0];
-    }));
+  function triggerClick(el, options) {
+    options = angular.extend({
+      metaKey:  false,
+      ctrlKey:  false,
+      shiftKey: false,
+      altKey:   false,
+      button:   0
+    }, options || {});
+
+    var e = document.createEvent("MouseEvents");
+    e.initMouseEvent(
+      "click", // typeArg of type DOMString, Specifies the event type.
+      true, // canBubbleArg of type boolean, Specifies whether or not the event can bubble.
+      true, // cancelableArg of type boolean, Specifies whether or not the event's default action can be prevented.
+      undefined, // viewArg of type views::AbstractView, Specifies the Event's AbstractView.
+      0, // detailArg of type long, Specifies the Event's mouse click count.
+      0, // screenXArg of type long, Specifies the Event's screen x coordinate
+      0, // screenYArg of type long, Specifies the Event's screen y coordinate
+      0, // clientXArg of type long, Specifies the Event's client x coordinate
+      0, // clientYArg of type long, Specifies the Event's client y coordinate
+      options.ctrlKey, // ctrlKeyArg of type boolean, Specifies whether or not control key was depressed during the Event.
+      options.altKey, // altKeyArg of type boolean, Specifies whether or not alt key was depressed during the Event.
+      options.shiftKey, // shiftKeyArg of type boolean, Specifies whether or not shift key was depressed during the Event.
+      options.metaKey, // metaKeyArg of type boolean, Specifies whether or not meta key was depressed during the Event.
+      options.button, // buttonArg of type unsigned short, Specifies the Event's mouse button.
+      null // relatedTargetArg of type EventTarget
+    );
+    el[0].dispatchEvent(e);
+  }
 
-    function triggerClick(el, options) {
-      options = angular.extend({
-        metaKey:  false,
-        ctrlKey:  false,
-        shiftKey: false,
-        altKey:   false,
-        button:   0
-      }, options || {});
-
-      var e = document.createEvent("MouseEvents");
-      e.initMouseEvent(
-        "click", // typeArg of type DOMString, Specifies the event type.
-        true, // canBubbleArg of type boolean, Specifies whether or not the event can bubble.
-        true, // cancelableArg of type boolean, Specifies whether or not the event's default action can be prevented.
-        undefined, // viewArg of type views::AbstractView, Specifies the Event's AbstractView.
-        0, // detailArg of type long, Specifies the Event's mouse click count.
-        0, // screenXArg of type long, Specifies the Event's screen x coordinate
-        0, // screenYArg of type long, Specifies the Event's screen y coordinate
-        0, // clientXArg of type long, Specifies the Event's client x coordinate
-        0, // clientYArg of type long, Specifies the Event's client y coordinate
-        options.ctrlKey, // ctrlKeyArg of type boolean, Specifies whether or not control key was depressed during the Event.
-        options.altKey, // altKeyArg of type boolean, Specifies whether or not alt key was depressed during the Event.
-        options.shiftKey, // shiftKeyArg of type boolean, Specifies whether or not shift key was depressed during the Event.
-        options.metaKey, // metaKeyArg of type boolean, Specifies whether or not meta key was depressed during the Event.
-        options.button, // buttonArg of type unsigned short, Specifies the Event's mouse button.
-        null // relatedTargetArg of type EventTarget
-      );
-      el[0].dispatchEvent(e);
-    }
+  describe('links', function() {
 
     beforeEach(inject(function($rootScope, $compile) {
       el = angular.element('<a ui-sref="contacts.item.detail({ id: contact.id })">Details</a>');
@@ -59,7 +60,6 @@ describe('uiStateRef', function() {
       scope.$digest();
     }));
 
-
     it('should generate the correct href', function() {
       expect(el.attr('href')).toBe('#/contacts/5');
     });
@@ -138,4 +138,25 @@ describe('uiStateRef', function() {
       expect(el.attr('action')).toBe('#/contacts/5');
     });
   });
+
+  describe('relative transitions', function() {
+
+    beforeEach(inject(function($rootScope, $compile, $state) {
+      $state.transitionTo("contacts.item", { id: 5 });
+      el = angular.element('<a ui-sref=".detail">Details</a>');
+      scope = $rootScope;
+      scope.$apply();
+
+      $compile(el)(scope);
+      scope.$digest();
+    }));
+
+    it('should work', inject(function ($state, $stateParams, $q) {
+      triggerClick(el);
+      $q.flush();
+
+      expect($state.$current.name).toBe("contacts.item.detail");
+      expect($state.params).toEqual({ id: '5' });
+    }));
+  });
 });