function $StateRefDirective($state, $timeout) {
  return {
    restrict: 'A',
    require: '?^uiSrefActive',
    link: function(scope, element, attrs, uiSrefActive) {
      var ref = parseStateRef(attrs.uiSref);
      var params = null, url = null, base = stateContext(element) || $state.$current;
      var isForm = element[0].nodeName === "FORM";
      var attr = isForm ? "action" : "href", nav = true;

      var update = function(newVal) {
        if (newVal) params = newVal;
        if (!nav) return;

        var newHref = $state.href(ref.state, params, { relative: base });

        if (uiSrefActive) {
          uiSrefActive.$$setStateInfo(ref.state, params);
        }
        if (!newHref) {
          nav = false;
          return false;
        }
        element[0][attr] = newHref;
      };

      if (ref.paramExpr) {
        scope.$watch(ref.paramExpr, function(newVal, oldVal) {
          if (newVal !== params) update(newVal);
        }, true);
        params = scope.$eval(ref.paramExpr);
      }
      update();

      if (isForm) return;

      element.bind("click", function(e) {
        var button = e.which || e.button;
        if ((button === 0 || 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 });
          });
          e.preventDefault();
        }
      });
    }
  };
}
@ngdoc directive
@name ui.router.state.directive:ui-sref

@requires ui.router.state.$state
@requires $timeout

@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. 

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 
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 
template containing the link.

@example
<pre>
<a ui-sref="home">Home</a> | <a ui-sref="about">About</a>

<ul>
  <li ng-repeat="contact in contacts">
    <a ui-sref="contacts.detail({ id: contact.id })">{{ contact.name }}</a>
  </li>
</ul>
</pre>

@param {string} ui-sref 'stateName' can be any valid absolute or relative state