this directive was in this repository before v0.2.0, but it was not a part of the release installed with bower. I found it, used it and faced this bug. I fixed this issue for myself and thought it was no official part of ui-router.
Today - using v0.2.0 I faced the need of this feature again and I found my ui-sref.js in my git repository. Here is the code I used earlier:
$StateRefDirective.$inject = ['$state', '$interpolate'];
function $StateRefDirective($state, $interpolate) {
function parseStateRef(ref) {
var parsed = ref.match(/^([^(]+?)\s*(\((.*)\))?$/);
if (!parsed || parsed.length !== 4) throw new Error("Invalid state ref '" + ref + "'");
return { state: parsed[1], paramExpr: parsed[3] || null };
}
function hasToBeInterpolated(attributeValue) {
return attributeValue.indexOf("{{") != -1
}
function isForm(element) {
return element[0].nodeName === "FORM";
}
function buildNewHref(attributeValue, params) {
return"/#" + $state.href(attributeValue.state, params, { lossy: true });
}
function setUrl(element, attr, newHref) {
element[0][attr] = newHref;
}
return {
restrict: 'A',
priority: 1000,
link: function (scope, element, attrs) {
var attributeValue = attrs.uiSref;
if (hasToBeInterpolated(attributeValue)) {
attributeValue = $interpolate(attributeValue)(scope);
}
attributeValue = parseStateRef(attributeValue);
var params = null
var url = null;
var attr = isForm(element) ? "action" : "href"; //, nav = true;
var update = function (newParams) {
if (newParams) {
params = newParams;
}
var newHref = buildNewHref(attributeValue, params);
if (!newHref) {
nav = false;
return false;
}
setUrl(element, attr, newHref);
};
if (attributeValue.paramExpr) {
scope.$watch(attributeValue.paramExpr, function (newParams, oldVal) {
if (newParams !== oldVal) {
update(newParams);
}
}, true);
params = scope.$eval(attributeValue.paramExpr);
}
update();
}
};
}
angular.module('ui.state').directive('uiSref', $StateRefDirective);
There could be some bugs, because I used it only once in testproject and It never got into production.