防止 angularjs ui-router 路由答案

【问题标题】：Prevent angularjs ui-router from routing防止 angularjs ui-router 路由
【发布时间】：2015-01-19 00:23:08
【问题描述】：

我的应用程序布局在右上角或页面中显示用户名。单击后，会出现一个下拉菜单，其中包含导航到设置、退出、配置文件等选项。

我们从创意团队那里获得了模板。他们使用带有 href=# 的锚标记 () 来阻止导航。现在我已经合并了 angular 并且正在使用 ui-router，这种方法显然不再有效。

有没有办法防止 ui-router 在某些情况下导航？一个明显的答案是将锚标记更改为按钮。我正在寻找另一种选择。

或者也许我完全需要一种新方法？

【问题讨论】：

标签： angularjs html angular-ui-router

【解决方案1】：

您可以在锚点上注册一个 ng-click，并根据您在处理程序中的情况通过$state.go 导航，而不是使用ui-sref。

<a ng-click="clickAction($event)" href="#">Route</a>

并在点击处理程序中阻止默认行为：

  //Make sure to inject `$state`
   $scope.clickAction = function($event){
      $event.preventDefault();

      if(myconditionNotToNavigateMet){
        return;
      }

      $state.go('myUrl');
   }

【讨论】：

【解决方案2】：

很简单，使用不带值的锚标签：

<a href class="classes">
  ...
</a>

这使得锚点效果不会错过。

【讨论】：

谢谢！这很好用。不知道为什么我没有想到这一点。虽然我通常选择给所有属性值（甚至是布尔属性）。例如：href=""，但无论哪种方式，它现在似乎都可以工作。