Merge pull request #1363 from angular-ui/issue-1362

fix(uiSref): nagivate to state when url is ""

src/state.js

@@ -1116,7 +1116,7 @@ function $StateProvider( $urlRouterProvider, $urlMatcherFactory) {
 
  var nav = (state && options.lossy) ? state.navigable : state;
 
- if (!nav || !nav.url) {
+ if (!nav || nav.url === undefined || nav.url === null) {
  return null;
  }
  return $urlRouter.href(nav.url, filterByKeys(objectKeys(state.params), params || {}), {

src/stateDirectives.js

@@ -86,6 +86,7 @@ function $StateRefDirective($state, $timeout) {
  link: function(scope, element, attrs, uiSrefActive) {
  var ref = parseStateRef(attrs.uiSref, $state.current.name);
  var params = null, url = null, base = stateContext(element) || $state.$current;
+ var newHref = null, isAnchor = element.prop("tagName") === "A";
  var isForm = element[0].nodeName === "FORM";
  var attr = isForm ? "action" : "href", nav = true;
 
@@ -102,7 +103,7 @@ function $StateRefDirective($state, $timeout) {
  if (newVal) params = newVal;
  if (!nav) return;
 
- var newHref = $state.href(ref.state, params, options);
+ newHref = $state.href(ref.state, params, options);
 
  var activeDirective = uiSrefActive[1] || uiSrefActive[0];
  if (activeDirective) {
@@ -134,8 +135,11 @@ function $StateRefDirective($state, $timeout) {
  });
  e.preventDefault();
 
+ // if the state has no URL, ignore one preventDefault from the <a> directive.
+ var ignorePreventDefaultCount = isAnchor && !newHref ? 1: 0;
  e.preventDefault = function() {
- $timeout.cancel(transition);
+ if (ignorePreventDefaultCount-- <= 0)
+ $timeout.cancel(transition);
  };
  }
  });

test/stateDirectivesSpec.js

@@ -1,10 +1,11 @@
 describe('uiStateRef', function() {
 
- var el, template, scope, document;
+ var timeoutFlush, el, el2, template, scope, document, _locationProvider;
 
  beforeEach(module('ui.router'));
 
- beforeEach(module(function($stateProvider) {
+ beforeEach(module(function($stateProvider, $locationProvider) {
+ _locationProvider = $locationProvider;
  $stateProvider.state('top', {
  url: ''
  }).state('contacts', {
@@ -74,29 +75,30 @@ describe('uiStateRef', function() {
  }));
  });
 
- describe('links', function() {
- var timeoutFlush, el2;
 
-  beforeEach(inject(function($rootScope, $compile, $timeout) {
-  el = angular.element('<a ui-sref="contacts.item.detail({ id: contact.id })">Details</a>');
-  el2 = angular.element('<a ui-sref="top">Top</a>');
-  scope = $rootScope;
-  scope.contact = { id: 5 };
-  scope.$apply();
+ function buildDOM($rootScope, $compile, $timeout) {
+ el = angular.element('<a ui-sref="contacts.item.detail({ id: contact.id })">Details</a>');
+ el2 = angular.element('<a ui-sref="top">Top</a>');
+ scope = $rootScope;
+ scope.contact = { id: 5 };
+ scope.$apply();
 
-  $compile(el)(scope);
-  $compile(el2)(scope);
-  scope.$digest();
+ $compile(el)(scope);
+ $compile(el2)(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.
- }
+ 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.
  }
- }));
+ }
+ };
+
+ describe('links', function() {
+ beforeEach(inject(buildDOM));
 
  it('should generate the correct href', function() {
  expect(el.attr('href')).toBe('#/contacts/5');
@@ -217,7 +219,7 @@ describe('uiStateRef', function() {
  expect($state.current.name).toEqual('top');
  expect($stateParams).toEqualData({});
  }));
- 
+
  it('should allow passing params to current state', inject(function($compile, $rootScope, $state) {
  $state.current.name = 'contacts.item.detail';
 
@@ -243,6 +245,38 @@ describe('uiStateRef', function() {
  }));
  });
 
+ describe('links in html5 mode', function() {
+ beforeEach(function() {
+ _locationProvider.html5Mode(true);
+ });
+
+ beforeEach(inject(buildDOM));
+
+ it('should generate the correct href', function() {
+ expect(el.attr('href')).toBe('/contacts/5');
+ expect(el2.attr('href')).toBe('');
+ });
+
+ it('should update the href when parameters change', function() {
+ expect(el.attr('href')).toBe('/contacts/5');
+ scope.contact.id = 6;
+ scope.$apply();
+ expect(el.attr('href')).toBe('/contacts/6');
+ });
+
+ it('should transition states when the url is empty', inject(function($state, $stateParams, $q) {
+ // Odd, in html5Mode, the initial state isn't matching on empty url, but does match if top.url is "/".
+// expect($state.$current.name).toEqual('top');
+
+ triggerClick(el2);
+ timeoutFlush();
+ $q.flush();
+
+ expect($state.current.name).toEqual('top');
+ expect($stateParams).toEqualData({});
+ }));
+ });
+
  describe('forms', function() {
  var el, scope;