Prevent angularjs ui-router from routing

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?

PSL · Accepted Answer · 2015-01-19 00:29:44Z

2

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

answered Jan 19, 2015 at 0:29

PSL

124k21 gold badges257 silver badges243 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

rigobcastro · Accepted Answer · 2015-01-19 03:28:44Z

1

Is very simple, use the anchor tag without value:

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

This makes the anchor effect do not miss.

answered Jan 19, 2015 at 3:28

rigobcastro

1,25711 silver badges18 bronze badges

1 Comment

spoof3r Over a year ago

Thanks! This works great. Not sure why I hadn't thought of this. Though I typically choose to give all attributes values (even boolean attributes). Ex: href="", but either way it seems to work now.

Collectives™ on Stack Overflow

Prevent angularjs ui-router from routing

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related