fix(uiSref): various click-related issues

- Always invoke digest loop
- Use $timeout to defer transition until other click events have processed

Author: nateabele

src/stateDirectives.js

@@ -12,8 +12,8 @@ function stateContext(el) {
   }
 }
 
-$StateRefDirective.$inject = ['$state'];
-function $StateRefDirective($state) {
+$StateRefDirective.$inject = ['$state', '$timeout'];
+function $StateRefDirective($state, $timeout) {
   return {
     restrict: 'A',
     require: '?^uiSrefActive',
@@ -53,8 +53,11 @@ function $StateRefDirective($state) {
         var button = e.which || e.button;
 
         if ((button === 0 || button == 1) && !e.ctrlKey && !e.metaKey && !e.shiftKey) {
-          scope.$evalAsync(function() {
-            $state.go(ref.state, params, { relative: base });
+          // HACK: This is to allow ng-clicks to be processed before the transition is initiated:
+          $timeout(function() {
+            scope.$apply(function() {
+              $state.go(ref.state, params, { relative: base });
+            });
           });
           e.preventDefault();
         }

test/stateDirectivesSpec.js

@@ -100,10 +100,11 @@ describe('uiStateRef', function() {
       expect(el.attr('href')).toBe('#/contacts/3');
     }));
 
-    it('should transition states when left-clicked', inject(function($state, $stateParams, $document, $q) {
+    it('should transition states when left-clicked', inject(function($state, $stateParams, $document, $q, $timeout) {
       expect($state.$current.name).toEqual('');
 
       triggerClick(el);
+      $timeout.flush();
       $q.flush();
 
       expect($state.current.name).toEqual('contacts.item.detail');
@@ -181,37 +182,42 @@ describe('uiStateRef', function() {
       scope.$digest();
     }));
 
-    it('should work', inject(function ($state, $stateParams, $q) {
+    it('should work', inject(function ($state, $stateParams, $q, $timeout) {
       triggerClick(el);
+      $timeout.flush();
       $q.flush();
 
       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) {
+    it('should resolve states from parent uiView', inject(function ($state, $stateParams, $q, $timeout) {
       $state.transitionTo('contacts');
       $q.flush();
 
       var parentToChild = angular.element(template[0].querySelector('a.item'));
       triggerClick(parentToChild);
+      $timeout.flush();
       $q.flush();
 
       var childToGrandchild = angular.element(template[0].querySelector('a.item-detail'));
       var childToParent = angular.element(template[0].querySelector('a.item-parent'));
 
       triggerClick(childToGrandchild);
+      $timeout.flush();
       $q.flush();
 
       var grandchildToParent = angular.element(template[0].querySelector('a.item-parent2'));
       expect($state.$current.name).toBe("contacts.item.detail")
 
       triggerClick(grandchildToParent);
+      $timeout.flush();
       $q.flush();
       expect($state.$current.name).toBe("contacts.item");
 
       $state.transitionTo("contacts.item.detail", { id: 3 });
       triggerClick(childToParent);
+      $timeout.flush();
       $q.flush();
       expect($state.$current.name).toBe("contacts");
     }));