7

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>
Grant Eagon
  • 1,400
  • 1
  • 12
  • 24
  • Did you ever find an answer to this? – Joao Sep 12 '14 at 19:20
  • 1
    @Joao the way to fix it is to use a directive, then you can conditionally suppress the attribute. Another way would be to invoke a function on the controller which would set your route for you, but that seems less modular to me. – Grant Eagon Sep 14 '14 at 00:50
  • possible duplicate of [How to achieve that "ui-sref" be conditionally executed?](http://stackoverflow.com/questions/25600071/how-to-achieve-that-ui-sref-be-conditionally-executed) – Betty St Nov 06 '14 at 14:38
  • It might be a good idea to also include error text here so people can find this issue easier – wap300 Oct 29 '15 at 15:57
  • This is an old post. I don't use Angular anymore. I've moved on to React. Angular required too much boilerplate for my taste. React makes more sense to me. However, you can find (i think) similar errors here: https://github.com/angular/angular.js/issues/5568 – Grant Eagon Nov 09 '15 at 17:53

2 Answers2

2

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

wap300
  • 2,660
  • 1
  • 16
  • 25
0

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 });
patrick
  • 9,290
  • 13
  • 61
  • 112