feat(uiSref): add ui-sref-on to expose transition promise

Fixes angular-ui#1863
added $q.when to the transition

Author: lordnox

src/stateDirectives.js

@@ -24,40 +24,40 @@ function stateContext(el) {
  * @restrict A
  *
  * @description
- * A directive that binds a link (`<a>` tag) to a state. If the state has an associated 
- * URL, the directive will automatically generate & update the `href` attribute via 
- * the {@link ui.router.state.$state#methods_href $state.href()} method. Clicking 
- * the link will trigger a state transition with optional parameters. 
+ * A directive that binds a link (`<a>` tag) to a state. If the state has an associated
+ * URL, the directive will automatically generate & update the `href` attribute via
+ * the {@link ui.router.state.$state#methods_href $state.href()} method. Clicking
+ * the link will trigger a state transition with optional parameters.
  *
- * Also middle-clicking, right-clicking, and ctrl-clicking on the link will be 
+ * Also middle-clicking, right-clicking, and ctrl-clicking on the link will be
  * handled natively by the browser.
  *
- * You can also use relative state paths within ui-sref, just like the relative 
+ * You can also use relative state paths within ui-sref, just like the relative
  * paths passed to `$state.go()`. You just need to be aware that the path is relative
- * to the state that the link lives in, in other words the state that loaded the 
+ * to the state that the link lives in, in other words the state that loaded the
  * template containing the link.
  *
  * You can specify options to pass to {@link ui.router.state.$state#go $state.go()}
  * using the `ui-sref-opts` attribute. Options are restricted to `location`, `inherit`,
  * and `reload`.
  *
  * @example
- * Here's an example of how you'd use ui-sref and how it would compile. If you have the 
+ * Here's an example of how you'd use ui-sref and how it would compile. If you have the
  * following template:
  * <pre>
  * <a ui-sref="home">Home</a> | <a ui-sref="about">About</a> | <a ui-sref="{page: 2}">Next page</a>
- * 
+ *
  * <ul>
  *     <li ng-repeat="contact in contacts">
  *         <a ui-sref="contacts.detail({ id: contact.id })">{{ contact.name }}</a>
  *     </li>
  * </ul>
  * </pre>
- * 
+ *
  * Then the compiled html would be (assuming Html5Mode is off and current state is contacts):
  * <pre>
  * <a href="#/home" ui-sref="home">Home</a> | <a href="#/about" ui-sref="about">About</a> | <a href="#/contacts?page=2" ui-sref="{page: 2}">Next page</a>
- * 
+ *
  * <ul>
  *     <li ng-repeat="contact in contacts">
  *         <a href="#/contacts/1" ui-sref="contacts.detail({ id: contact.id })">Joe</a>
@@ -76,8 +76,8 @@ function stateContext(el) {
  * @param {string} ui-sref 'stateName' can be any valid absolute or relative state
  * @param {Object} ui-sref-opts options to pass to {@link ui.router.state.$state#go $state.go()}
  */
-$StateRefDirective.$inject = ['$state', '$timeout'];
-function $StateRefDirective($state, $timeout) {
+$StateRefDirective.$inject = ['$state', '$timeout', '$q'];
+function $StateRefDirective($state, $timeout, $q) {
   var allowedOptions = ['location', 'inherit', 'reload', 'absolute'];
 
   return {
@@ -134,7 +134,12 @@ function $StateRefDirective($state, $timeout) {
         if ( !(button > 1 || e.ctrlKey || e.metaKey || e.shiftKey || element.attr('target')) ) {
           // HACK: This is to allow ng-clicks to be processed before the transition is initiated:
           var transition = $timeout(function() {
-            $state.go(ref.state, params, options);
+            var $transition = $state.go(ref.state, params, options);
+            if($transition && attrs.uiSrefOn) {
+              scope.$eval(attrs.uiSrefOn, {
+                $transition: $q.when($transition)
+              });
+            }
           });
           e.preventDefault();
 

test/stateDirectivesSpec.js

@@ -559,3 +559,96 @@ describe('uiView controllers or onEnter handlers', function() {
     expect(count).toBe(1);
   }));
 });
+
+
+ddescribe('uiSrefResolve', function() {
+  var template = '<div><a ui-sref=".a" ui-sref-on="check($transition)" class="a">A</a></div>';
+
+  beforeEach(module('ui.router'));
+
+  var $timeout, defer;
+
+  beforeEach(module(function($stateProvider) {
+    $stateProvider.state('top', {
+      url: ''
+    }).state('a', {
+      url: '/a',
+      template: 'Success',
+      controller: function(a) {}, // require a
+      resolve: {
+        a: function($q) {
+          defer = $q.defer();
+          return defer.promise;
+        }
+      }
+    });
+  }));
+
+  beforeEach(inject(function(_$timeout_) {
+    $timeout = _$timeout_;
+  }));
+
+  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);
+  }
+
+  it('should execute ui-sref-on code on click', inject(function($rootScope, $q, $compile, $state) {
+    el = angular.element(template);
+    template = $compile(el)($rootScope);
+    $rootScope.$digest();
+
+    var a = angular.element(template[0].querySelector('.a'));
+
+    var state = 'start', transition = null;
+    $rootScope.check = function(_transition) {
+      state = 'resolving';
+      transition = _transition;
+
+      transition.then(function() {
+        state = 'resolved';
+      });
+    };
+
+    expect(state).toBe('start');
+    expect(transition).toBeNull();
+    expect(a.attr('class')).toBe('a');
+
+    triggerClick(a);
+    $timeout.flush();
+
+    expect(state).toBe('resolving');
+    expect(transition).not.toBeNull();
+
+    defer.resolve('done');
+    $timeout.flush();
+
+    expect(state).toBe('resolved');
+  }));
+
+});