CODEWITHSUNDEEP
htmlangularjsangular-ui-routerhashref
Marksmanship
Marksmanship

Reputation: 169

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

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?

Upvotes: 1

Views: 1164

Answers (4)

Sarath Kumar
Sarath Kumar

Reputation: 70

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?

Upvotes: -1

Judson Terrell
Judson Terrell

Reputation: 4306

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

Upvotes: 1

Naren Murali
Naren Murali

Reputation: 56512

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

Upvotes: 1

Sudhansu Choudhary
Sudhansu Choudhary

Reputation: 3360

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.

Upvotes: 0

Related Questions