Ensuring state transitions from uiSref are relative to containing uiView.

Author: nateabele

src/state.js

@@ -211,6 +211,7 @@ function $StateProvider(   $urlRouterProvider,   $urlMatcherFactory,           $
 
     $state.transitionTo = function transitionTo(to, toParams, options) {
       if (!isDefined(options)) options = (options === true || options === false) ? { location: options } : {};
+      toParams = toParams || {};
       options = extend({ location: true, inherit: false, relative: null }, options);
 
       var toState = findState(to, options.relative);

src/stateDirectives.js

@@ -10,15 +10,21 @@ function $StateRefDirective($state) {
     restrict: 'A',
     link: function(scope, element, attrs) {
       var ref = parseStateRef(attrs.uiSref);
-      var params = null, url = null;
+      var params = null, url = null, base = $state.$current;
       var isForm = element[0].nodeName === "FORM";
       var attr = isForm ? "action" : "href", nav = true;
 
+      var stateData = element.parent().inheritedData('$uiView');
+
+      if (stateData && stateData.state && stateData.state.name) {
+        base = stateData.state;
+      }
+
       var update = function(newVal) {
         if (newVal) params = newVal;
         if (!nav) return;
 
-        var newHref = $state.href(ref.state, params);
+        var newHref = $state.href(ref.state, params, { relative: base });
 
         if (!newHref) {
           nav = false;
@@ -39,7 +45,7 @@ function $StateRefDirective($state) {
 
       element.bind("click", function(e) {
         if ((e.which == 1) && !e.ctrlKey && !e.metaKey && !e.shiftKey) {
-          $state.go(ref.state, params);
+          $state.go(ref.state, params, { relative: base });
           scope.$apply();
           e.preventDefault();
         }

test/stateDirectivesSpec.js

@@ -1,17 +1,21 @@
 describe('uiStateRef', function() {
 
-  var el, scope, document;
+  var el, template, scope, document;
 
   beforeEach(module('ui.router'));
 
   beforeEach(module(function($stateProvider) {
     $stateProvider.state('index', {
       url: '/'
     }).state('contacts', {
-      url: '/contacts'
+      url: '/contacts',
+      template: '<a ui-sref=".item({ id: 5 })" class="item">Person</a> <ui-view></ui-view>'
     }).state('contacts.item', {
-      url: '/:id'
-    }).state('contacts.item.detail', {});
+      url: '/:id',
+      template: '<a ui-sref=".detail" class="item-detail">Detail</a> | <a ui-sref="^" class="item-parent">Parent</a> | <ui-view></ui-view>'
+    }).state('contacts.item.detail', {
+      template: '<div class="title">Detail</div> | <a ui-sref="^" class="item-parent2">Item</a>'
+    });
   }));
 
   beforeEach(inject(function($document) {
@@ -148,6 +152,7 @@ describe('uiStateRef', function() {
       scope.$apply();
 
       $compile(el)(scope);
+      template = $compile(angular.element('<ui-view></ui-view>'))(scope);
       scope.$digest();
     }));
 
@@ -158,5 +163,32 @@ describe('uiStateRef', function() {
       expect($state.$current.name).toBe("contacts.item.detail");
       expect($state.params).toEqual({ id: '5' });
     }));
+
+    it('should resolve states from parent uiView', inject(function ($state, $stateParams, $q) {
+      $state.transitionTo('contacts');
+      $q.flush();
+
+      var parentToChild = angular.element(template[0].querySelector('a.item'));
+      triggerClick(parentToChild);
+      $q.flush();
+
+      var childToGrandchild = angular.element(template[0].querySelector('a.item-detail'));
+      var childToParent = angular.element(template[0].querySelector('a.item-parent'));
+
+      triggerClick(childToGrandchild);
+      $q.flush();
+
+      var grandchildToParent = angular.element(template[0].querySelector('a.item-parent2'));
+      expect($state.$current.name).toBe("contacts.item.detail")
+
+      triggerClick(grandchildToParent);
+      $q.flush();
+      expect($state.$current.name).toBe("contacts.item");
+
+      $state.transitionTo("contacts.item.detail", { id: 3 });
+      triggerClick(childToParent);
+      $q.flush();
+      expect($state.$current.name).toBe("contacts");
+    }));
   });
 });