feat(uiSref): extend syntax for ui-sref

add possibility to pass params to current state without entering state name

Author: timfjord

src/stateDirectives.js

@@ -1,5 +1,7 @@
-function parseStateRef(ref) {
-  var parsed = ref.replace(/\n/g, " ").match(/^([^(]+?)\s*(\((.*)\))?$/);
+function parseStateRef(ref, current) {
+  var preparsed = ref.match(/^\s*({[^}]*})\s*$/), parsed;
+  if (preparsed) ref = current + '(' + preparsed[1] + ')';
+  parsed = ref.replace(/\n/g, " ").match(/^([^(]+?)\s*(\((.*)\))?$/);
   if (!parsed || parsed.length !== 4) throw new Error("Invalid state ref '" + ref + "'");
   return { state: parsed[1], paramExpr: parsed[3] || null };
 }
@@ -43,7 +45,7 @@ function stateContext(el) {
  * 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="home">Home</a> | <a ui-sref="about">About</a> | <a ui-sref="{page: 2}">Next page</a>
  * 
  * <ul>
  *     <li ng-repeat="contact in contacts">
@@ -52,9 +54,9 @@ function stateContext(el) {
  * </ul>
  * </pre>
  * 
- * Then the compiled html would be (assuming Html5Mode is off):
+ * 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="#/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">
@@ -82,7 +84,7 @@ function $StateRefDirective($state, $timeout) {
     restrict: 'A',
     require: '?^uiSrefActive',
     link: function(scope, element, attrs, uiSrefActive) {
-      var ref = parseStateRef(attrs.uiSref);
+      var ref = parseStateRef(attrs.uiSref, $state.current.name);
       var params = null, url = null, base = stateContext(element) || $state.$current;
       var isForm = element[0].nodeName === "FORM";
       var attr = isForm ? "action" : "href", nav = true;

test/stateDirectivesSpec.js

@@ -184,6 +184,30 @@ describe('uiStateRef', function() {
       expect($state.current.name).toEqual('');
       expect($stateParams).toEqual({ id: "5" });
     }));
+    
+    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();
+
+      $compile(el)($rootScope);
+      $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();
+
+      $compile(el)($rootScope);
+      $rootScope.$digest();
+      expect(el.attr('href')).toBe('#/contacts/3');
+    }));
   });
 
   describe('forms', function() {