HTML <a href="#hash"> in AngularJS

Question

I have an issue with the <a href="#"> in my AngularJS app.

My main issue is on the:

<a href="#menu-toggle" class="btn btn-default" id="menu-toggle"><em class="fa fa-bars"></em></a>

navigation.html -> this is a template of navigation directive.

<nav class="sidebar col-xs-12 col-sm-4 col-lg-3 col-xl-2 bg-faded sidebar-style-1">
<h1 class="site-title"><a href="index.html"><em class="fa fa-rocket"></em> Brand.name</a></h1>

<a href="#menu-toggle" class="btn btn-default" id="menu-toggle"><em class="fa fa-bars"></em></a>

<ul class="nav nav-pills flex-column sidebar-nav">
    <li class="nav-item"><a class="nav-link active" href="index.html"><em class="fa fa-dashboard"></em> Dashboard <span class="sr-only">(current)</span></a></li>
</ul>

<a href="#" class="logout-button"><em class="fa fa-power-off"></em> Signout</a></nav>

index.html

<body ng-app="test" class="body-bg" ng-style="bgimg" ui-view>
</body>

app.js

var app = angular.module("test", ["ui.router");

app.config(function($stateProvider, $urlRouterProvider){
    $urlRouterProvider.otherwise('/');
    $stateProvider

        // login route
        .state("login", {
        url:"/",
        controller: "LoginController",
        templateUrl: "pages/login/login.html"
        })
        // admin route
        .state("admin", {
        url:"/admin",
        controller: "AdminController",
        templateUrl: "pages/admin/admin.html"
        })

And currently I am doing a SPA routing using ui-sref of ui-router. The problem is everytime I click the button, I get redirected to the default state $urlRouterProvider.otherwise('/');.

How I can do something similar to that HTML href="#" with AngularJS ui-sref?

Or is there other ways?

are you using a plugin for your menu? Jquery or Boostrap?

Judson Terrell
– Judson Terrell

2017-08-23 03:55:27 +00:00
Commented Aug 23, 2017 at 3:55 — Judson Terrell
– Judson Terrell, Commented Aug 23, 2017 at 3:55
yes, same jquery and bootstrap.

Marksmanship
– Marksmanship

2017-08-23 03:56:10 +00:00
Commented Aug 23, 2017 at 3:56 — Marksmanship
– Marksmanship, Commented Aug 23, 2017 at 3:56

Naren Murali · Accepted Answer · 2017-08-23 04:17:40Z

1

from the code in the question I can say that, the normal usage of href will result in redirection so you need to use data-target, can you please try this?

<a  data-target="#menu-toggle" data-toggle="collapse" class="btn btn-default"><em class="fa fa-bars"></em></a>

JSFiddle: here

edited Aug 23, 2017 at 4:17

answered Aug 23, 2017 at 4:04

Naren Murali

66.2k6 gold badges51 silver badges96 bronze badges

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

4 Comments

Marksmanship Over a year ago

Thanks for the answer but it's not working for me. I thought it would be working as I saw in your provided plnkr. But sadly not. Appreciate your help.

Marksmanship Over a year ago

No, it's not happening but It's not collapsing.

Naren Murali Over a year ago

@Marksmanship It should have worked as I have provided in the JSFiddle, Share with me a JSFiddle the issue, if you want to use this method to solve your problem :)

Marksmanship Over a year ago

Okay, I will create a plnkr and I will put the link on my question. Appreciate your trying to help, Thanks

Judson Terrell · Accepted Answer · 2017-08-23 04:19:52Z

1

if you have jQuery (which you probably do) inside your head tag...

<script>
    $(document).ready(function(){
        $('[href="#menu-toggle"]').click(function(event){

             event.preventDefault();
        })

    });
</script>

Basically keeps the link from routing via window navigation. You can easily test by pasting this code into your browser console..

$('[href="#menu-toggle"]').click(function(event){

         event.preventDefault();
    })

edited Aug 23, 2017 at 4:19

answered Aug 23, 2017 at 3:56

Judson Terrell

4,3262 gold badges32 silver badges51 bronze badges

8 Comments

Marksmanship Over a year ago

where do I insert that line?

Judson Terrell Over a year ago

you can put in in the <head> tag inside of a script tag. let me update my answer...

Marksmanship Over a year ago

I tested it, but it is redirecting. But I will explore more. Maybe I just didn't do it right. Thanks, appreciate it.

Judson Terrell Over a year ago

I gave you the wrong selector. Please see my updated answer

Marksmanship Over a year ago

Syntax error, unrecognized expression: [href=#menu-toggle]

|

Sudhansu Choudhary · Accepted Answer · 2017-08-23 04:00:46Z

0

You can use a combination of href and ng-click to solve your problem.

<a href="" class="logout-button" ng-click="signOut()"><em class="fa fa-power-off"></em> Signout</a></nav>

Where signOut() is a function on your controller.

answered Aug 23, 2017 at 4:00

Sudhansu Choudhary

3,3903 gold badges21 silver badges33 bronze badges

Comments

Sarath Kumar · Accepted Answer · 2017-08-23 05:34:31Z

-1

1.Just remove the href tag completely from your anchor tag. It's still a perfectly valid tag without it. (or) href="javascript:void(0);"

for your reference: Angular-UI-Router: should i avoid href with ui-router?

answered Aug 23, 2017 at 5:34

Sarath Kumar

806 bronze badges

Collectives™ on Stack Overflow

HTML <a href="#hash"> in AngularJS

4 Answers 4

4 Comments

8 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

8 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related