阻止 angularjs ui-router 路由

Question

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

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

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

或者我可能需要一种全新的方法？

Answer 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');
   }

Answer 2

很简单，使用没有值的锚标签：

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

这让锚点效果不错过

阻止 angularjs ui-router 路由

Prevent angularjs ui-router from routing

html

angularjs

angular-ui-router