fix(ui-sref): handle state transition promise rejection in ui-sref directive

In the current world, ui-sref does nothing when the promise returned by
$state.go is rejected. This PR gives ui-sref directive the ability to
emit $stateChangeCancel when the transition promise rejects.
The reason why I have chosen to implement this in the ui-sref directive
and not in the definition for $state.go or $state.transitionTo are
outlined in the issue below.

angular-ui#3027.

Author: zeusdeux

src/stateDirectives.js

@@ -26,14 +26,23 @@ function getTypeInfo(el) {
   };
 }
 
-function clickHook(el, $state, $timeout, type, current) {
+function clickHook(scope, el, $state, $timeout, type, current) {
   return function(e) {
     var button = e.which || e.button, target = current();
 
     if (!(button > 1 || e.ctrlKey || e.metaKey || e.shiftKey || el.attr('target'))) {
       // HACK: This is to allow ng-clicks to be processed before the transition is initiated:
       var transition = $timeout(function() {
-        $state.go(target.state, target.params, target.options);
+        var transitionPromise = $state.go(target.state, target.params, target.options);
+        var noop = function() {};
+
+        // if there's an error since the state change is cancelled
+        // emit $stateChangeCancel
+        transitionPromise.then(noop, function(e) {
+          if (scope) {
+            scope.$emit('$stateChangeCancel', e);
+          }
+        });
       });
       e.preventDefault();
 
@@ -144,7 +153,7 @@ function $StateRefDirective($state, $timeout) {
       update();
 
       if (!type.clickable) return;
-      hookFn = clickHook(element, $state, $timeout, type, function() { return def; });
+      hookFn = clickHook(scope, element, $state, $timeout, type, function() { return def; });
       element.bind("click", hookFn);
       scope.$on('$destroy', function() {
         element.unbind("click", hookFn);
@@ -196,7 +205,7 @@ function $StateRefDynamicDirective($state, $timeout) {
       runStateRefLink(scope.$eval(watch));
 
       if (!type.clickable) return;
-      hookFn = clickHook(element, $state, $timeout, type, function() { return def; });
+      hookFn = clickHook(scope, element, $state, $timeout, type, function() { return def; });
       element.bind("click", hookFn);
       scope.$on('$destroy', function() {
         element.unbind("click", hookFn);

test/stateDirectivesSpec.js

@@ -141,7 +141,7 @@ describe('uiStateRef', function() {
         ctrlKey:  undefined,
         shiftKey: undefined,
         altKey:   undefined,
-        button:   undefined 
+        button:   undefined
       });
       timeoutFlush();
       $q.flush();
@@ -156,7 +156,7 @@ describe('uiStateRef', function() {
 
       timeoutFlush();
       $q.flush();
-      
+
       expect($state.current.name).toEqual('top');
       expect($stateParams).toEqualData({ });
     }));
@@ -222,7 +222,7 @@ describe('uiStateRef', function() {
 
     it('should allow passing params to current state', inject(function($compile, $rootScope, $state) {
       $state.current.name = 'contacts.item.detail';
-      
+
       el = angular.element("<a ui-sref=\"{id: $index}\">Details</a>");
       $rootScope.$index = 3;
       $rootScope.$apply();
@@ -231,10 +231,10 @@ describe('uiStateRef', function() {
       $rootScope.$digest();
       expect(el.attr('href')).toBe('#/contacts/3');
     }));
-    
+
     it('should allow multi-line attribute values when passing params to current state', inject(function($compile, $rootScope, $state) {
       $state.current.name = 'contacts.item.detail';
-      
+
       el = angular.element("<a ui-sref=\"{\n\tid: $index\n}\">Details</a>");
       $rootScope.$index = 3;
       $rootScope.$apply();
@@ -368,7 +368,7 @@ describe('uiStateRef', function() {
       expect(angular.element(template[0]).attr('href')).toBe('#/contacts/10');
     }));
 
-    it('accepts option overrides', inject(function ($compile, $timeout, $state) {
+    it('accepts option overrides', inject(function ($compile, $timeout, $state, $q) {
       var transitionOptions;
 
       el = angular.element('<a ui-state="state" ui-state-opts="opts">state</a>');
@@ -379,6 +379,7 @@ describe('uiStateRef', function() {
 
       spyOn($state, 'go').andCallFake(function(state, params, options) {
         transitionOptions = options;
+        return $q(function(res, rej) { res(42); });
       });
 
       triggerClick(template)