function $StateRefDirective($state, $timeout) {
  return {
    restrict: 'A',
    require: ['?^uiSrefActive', '?^uiSrefActiveEq'],
    link: function(scope, element, attrs, uiSrefActive) {
      var ref    = parseStateRef(attrs.uiSref, $state.current.name);
      var def    = { state: ref.state, href: null, params: null };
      var type   = getTypeInfo(element);
      var active = uiSrefActive[1] || uiSrefActive[0];
      var unlinkInfoFn = null;
      var hookFn;

      def.options = extend(defaultOpts(element, $state), attrs.uiSrefOpts ? scope.$eval(attrs.uiSrefOpts) : {});

      var update = function(val) {
        if (val) def.params = angular.copy(val);
        def.href = $state.href(ref.state, def.params, def.options);

        if (unlinkInfoFn) unlinkInfoFn();
        if (active) unlinkInfoFn = active.$$addStateInfo(ref.state, def.params);
        if (def.href !== null) attrs.$set(type.attr, def.href);
      };

      if (ref.paramExpr) {
        scope.$watch(ref.paramExpr, function(val) { if (val !== def.params) update(val); }, true);
        def.params = angular.copy(scope.$eval(ref.paramExpr));
      }
      update();

      if (!type.clickable) return;
      hookFn = clickHook(element, $state, $timeout, type, function() { return def; });
      element[element.on ? 'on' : 'bind']("click", hookFn);
      scope.$on('$destroy', function() {
        element[element.off ? 'off' : 'unbind']("click", hookFn);
      });
    }
  };
}
@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.

You can specify options to pass to {@link ui.router.state.$state#methods_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
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>
    </li>
    <li ng-repeat="contact in contacts">
        <a href="#/contacts/2" ui-sref="contacts.detail({ id: contact.id })">Alice</a>
    </li>
    <li ng-repeat="contact in contacts">
        <a href="#/contacts/3" ui-sref="contacts.detail({ id: contact.id })">Bob</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#methods_go $state.go()}