防止angularjs ui-router路由

Question

I have a layout for my application that displays the user's name in the top right corner or the page. When clicked, a drop down appears with options to navigate to settings, sign out, profile, etc.

We got the template from our creative team. They are using an anchor tag () with href=# to prevent navigation. Now that I've incorporated angular and am using ui-router, this approach obviously no longer works.

Is there a way to prevent ui-router from navigating under certain conditions? One obvious answer would be to change the anchor tag to a button. I am looking for another alternative.

Or perhaps I need a new approach altogether?

Answer 1

You could register an ng-click on the anchor, and navigate via $state.go based on your condition inside the handler instead of using ui-sref .

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

And in the click handler prevent the default behavior:

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

      if(myconditionNotToNavigateMet){
        return;
      }

      $state.go('myUrl');
   }

Answer 2

Is very simple, use the anchor tag without value:

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

This makes the anchor effect do not miss.