feat(uiSref): add support for transition options

Allows optionally specifying options to be passed to $state.go via attribute ui-sref-opts.
angular-ui · Jan 24, 2014 · 2ed7a72 · 2ed7a72
1 parent cf34271
commit 2ed7a72
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 2 deletions.
diff --git a/src/stateDirectives.js b/src/stateDirectives.js
@@ -35,6 +35,10 @@ function stateContext(el) {
  * 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
  * <pre>
  * <a ui-sref="home">Home</a> | <a ui-sref="about">About</a>
@@ -44,12 +48,17 @@ function stateContext(el) {
  *     <a ui-sref="contacts.detail({ id: contact.id })">{{ contact.name }}</a>
  *   </li>
  * </ul>
+ *
+ * <a ui-sref="home" ui-sref-opts="{reload: true}">Home</a>
  * </pre>
  *
  * @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) {
+  var allowedOptions = ['location', 'inherit', 'reload'];
+
   return {
     restrict: 'A',
     require: '?^uiSrefActive',
@@ -59,11 +68,21 @@ function $StateRefDirective($state, $timeout) {
       var isForm = element[0].nodeName === "FORM";
       var attr = isForm ? "action" : "href", nav = true;
 
+      var options = {
+        relative: base
+      };
+      var optionsOverride = scope.$eval(attrs.uiSrefOpts) || {};
+      angular.forEach(allowedOptions, function(option) {
+        if (option in optionsOverride) {
+          options[option] = optionsOverride[option];
+        }
+      });
+
       var update = function(newVal) {
         if (newVal) params = newVal;
         if (!nav) return;
 
-        var newHref = $state.href(ref.state, params, { relative: base });
+        var newHref = $state.href(ref.state, params, options);
 
         if (uiSrefActive) {
           uiSrefActive.$$setStateInfo(ref.state, params);
@@ -90,7 +109,7 @@ 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:
           $timeout(function() {
-            $state.go(ref.state, params, { relative: base });
+            $state.go(ref.state, params, options);
           });
           e.preventDefault();
         }

diff --git a/test/stateDirectivesSpec.js b/test/stateDirectivesSpec.js
@@ -257,6 +257,32 @@ describe('uiStateRef', function() {
       expect($state.$current.name).toBe("contacts");
     }));
   });
+
+  describe('transition options', function() {
+
+    beforeEach(inject(function($rootScope, $compile, $state) {
+      el = angular.element('<a ui-sref="contacts.item.detail({ id: contact.id })" ui-sref-opts="{ reload: true, notify: true }">Details</a>');
+      scope = $rootScope;
+      scope.contact = { id: 5 };
+
+      $compile(el)(scope);
+      scope.$digest();
+    }));
+
+    it('uses allowed transition options', inject(function($q, $timeout, $state) {
+      var transitionOptions;
+
+      spyOn($state, 'go').andCallFake(function(state, params, options) {
+        transitionOptions = options;
+      });
+
+      triggerClick(el);
+      $timeout.flush();
+
+      expect(transitionOptions.reload).toEqual(true);
+      expect(transitionOptions.notify).toBeUndefined();
+    }));
+  });
 });
 
 describe('uiSrefActive', function() {