Question

我正在使用angular-ui-router在bootstrap和angular中编写一个下拉导航。当链接有下拉列表时，链接应为空白。但是，如果我将一条空白路线传递给ui-sref，我会收到错误。

以下是代码段：

<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

我通过不使用ui-sref来解决这个问题，而是使用ng-href：

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

<强>控制器：

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

如何使用具有空白ui-sref属性的angular-ui-router？

2 个答案: