HTML 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 Aug 23 '17 at 03:55 — Judson Terrell, Aug 23 '17 at 03:55
yes, same jquery and bootstrap. – Marksmanship Aug 23 '17 at 03:56 — Marksmanship, Aug 23 '17 at 03:56

Judson Terrell · Answer 1 · 2017-08-23T04:19:52.353

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 '17 at 04:19

answered Aug 23 '17 at 03:56

Judson Terrell

4,204
2
29
45

where do I insert that line? – Marksmanship Aug 23 '17 at 03:57
you can put in in the tag inside of a script tag. let me update my answer... – Judson Terrell Aug 23 '17 at 03:59
I tested it, but it is redirecting. But I will explore more. Maybe I just didn't do it right. Thanks, appreciate it. – Marksmanship Aug 23 '17 at 04:06
I gave you the wrong selector. Please see my updated answer – Judson Terrell Aug 23 '17 at 04:14
Syntax error, unrecognized expression: [href=#menu-toggle] – Marksmanship Aug 23 '17 at 04:16
Try putting single quotes around '#menu-toggle' – Judson Terrell Aug 23 '17 at 04:17
Actually double quote because we are using single quotes on the selector. I'll update answer... – Judson Terrell Aug 23 '17 at 04:19
it's not working. Okay, I will create a plnkr and I will put the link on my question. Appreciate your trying to help, Thanks – Marksmanship Aug 23 '17 at 04:24

Naren Murali · Answer 2 · 2017-08-23T04:17:40.200

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 '17 at 04:17

answered Aug 23 '17 at 04:04

Naren Murali

19,250
3
27
54

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 Aug 23 '17 at 04:11
1

No, it's not happening but It's not collapsing. – Marksmanship Aug 23 '17 at 04:14
@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 :) – Naren Murali Aug 23 '17 at 04:17
Okay, I will create a plnkr and I will put the link on my question. Appreciate your trying to help, Thanks – Marksmanship Aug 23 '17 at 04:25

score 0 · Answer 3 · answered Aug 23 '17 at 04:00

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 '17 at 04:00

Sudhansu Choudhary

3,322
3
19
30

score -1 · Answer 4 · answered Aug 23 '17 at 05:34

-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 '17 at 05:34

Sarath Kumar

70
6

HTML in AngularJS

4 Answers4