How can I have angular-ui-router with a blank ui-sref attribute?

Question

I'm writing a dropdown nav in bootstrap and angular with angular-ui-router. When a link has a dropdown, the link should be blank. But if I pass a blank route to ui-sref I get an error.

Here's a code snippet:

<ul class="dropdown-menu">
  <li ng-repeat="button in buttons" id="foo" ng-class="{'dropdown-submenu': $index=button.hasLinks}" >
    <a ui-sref="{{button.route}}" title="{{ button.text }} Tab" class="{ dropdown-toggle: button.links }" data-toggle="dropdown">
      <i class="icon icon-{{ button.icon }}"></i> {{ button.text }}
    </a>
    <ul class="dropdown-menu">
      <li ng-repeat="link in button.links">
        <a ng-href="{{ link.route }}" title="{{ link.text }} Tab">
          {{ link.text }}
        </a>
      </li>
    </ul>
  </li>
</ul>

Answer 1

Currently, as you can read in this topic , ui-sref doesn't handle empty argument, as it is (quoting the author) a misuse of the directive. Upcomming ui-state directive is supposed to handle that, but for now the best way I found was (in Angular 1.3 and above) to use ng-attr as below:

ng-attr-ui-sref="{{ state || undefined }}"

If state is blank, it will yield undefined, and no attribute in effect.

EDIT: Note that as long as it works, it will throw an exception in the console due to ui-router open bug

Answer 2

I solved this issue by not using ui-sref, but rather ng-href:

<a ng-href="{{ ::someObject.href }}">some link</a>

controller :

someObject.href = $state.href('FancyState', params: { id: 123 });