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

У меня есть проблема с <a href="#"> в моем приложении AngularJS.

Моя главная проблема на:

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

navigation.html -> это template из navigationdirective,

<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"
        })

И в настоящее время я делаю маршрутизацию SPA с использованием ui-sref из ui-router, Проблема в том, что каждый раз, когда я нажимаю button, Я перенаправлен по умолчанию state$urlRouterProvider.otherwise('/');,

Как я могу сделать что-то похожее на этот HTML href="#" с AngularJS ui-sref?

Или есть другие способы?

Источник

4 ответа

Из кода в вопросе я могу сказать, что нормальное использование href приведет к перенаправлению, поэтому вам нужно использовать data-targetне могли бы вы попробовать это?

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

JSFiddle: здесь

Источник

Если у вас есть jQuery (что вы, вероятно, делаете) внутри тега head...

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

             event.preventDefault();
        })

    });
</script>

В основном удерживает ссылку от маршрутизации через оконную навигацию. Вы можете легко проверить, вставив этот код в консоль браузера.

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

         event.preventDefault();
    })
Источник

Вы можете использовать комбинацию href а также ng-click чтобы решить вашу проблему.

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

куда signOut() это функция на вашем контроллере.

Источник

1. Просто полностью удалите тег href из вашего тега привязки. Это все еще совершенно допустимый тег без него. (или) href="javascript:void(0);"

для справки: Angular-UI-Router: мне следует избегать href с ui-router?

Источник
Другие вопросы по тегам