AngularJS 中的 HTML <a href="#hash">答案

【问题标题】：HTML <a href="#hash"> in AngularJSAngularJS 中的 HTML <a href="#hash">
【发布时间】：2017-08-23 13:34:31
【问题描述】：

我的 AngularJS 应用程序中的 <a href="#"> 有问题。

我的主要问题是：

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

navigation.html -> 这是template 的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"
        })

目前我正在使用ui-sref 的ui-router 进行SPA 路由。问题是每次我点击button，我都会被重定向到默认的state$urlRouterProvider.otherwise('/');。

我怎样才能用 AngularJS ui-sref 做类似于 HTML href="#" 的事情？

或者还有其他方法吗？

【问题讨论】：

您是否在为您的菜单使用插件？ Jquery 还是 Boostrap？
是的，同样的 jquery 和 bootstrap。

标签： html angularjs angular-ui-router hashref

【解决方案1】：

从问题中的代码我可以说，href的正常使用会导致重定向，所以你需要使用data-target，你可以试试这个吗？

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

JSFiddle： here

【讨论】：

感谢您的回答，但它对我不起作用。我认为它会像我在您提供的 plnkr 中看到的那样工作。但遗憾的是没有。感谢您的帮助。
不，它没有发生，但它没有崩溃。
@Marksmanship 它应该像我在 JSFiddle 中提供的那样工作，如果您想使用此方法解决您的问题，请与我分享一个 JSFiddle 问题 :)
好的，我将创建一个 plnkr，并将链接放在我的问题上。感谢您的帮助，谢谢

【解决方案2】：

如果你有 jQuery（你可能有）在你的 head 标签内...

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

             event.preventDefault();
        })

    });
</script>

基本上阻止链接通过窗口导航进行路由。您可以通过将此代码粘贴到浏览器控制台来轻松进行测试..

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

         event.preventDefault();
    })

【讨论】：

该行在哪里插入？
你可以在标签里面放入一个 script 标签。让我更新我的答案...
我测试过，但它正在重定向。但我会探索更多。也许我只是做得不对。谢谢，不胜感激。
我给了你错误的选择器。请查看我的更新答案
语法错误，无法识别的表达式：[href=#menu-toggle]

【解决方案3】：

您可以结合使用href 和ng-click 来解决您的问题。

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

signOut() 是控制器上的一个函数。

【讨论】：

【解决方案4】：

1.只需从锚标记中完全删除 href 标记。没有它，它仍然是一个完全有效的标签。 (或) href="javascript:void(0);"

供您参考：Angular-UI-Router: should i avoid href with ui-router?

【讨论】：