使用链接（<a> 标签）而不更改 angularJS 中的 url答案

【问题标题】：Using links (<a> tags) without changing the url in angularJS使用链接（<a> 标签）而不更改 angularJS 中的 url
【发布时间】：2016-02-27 02:26:24
【问题描述】：

我正在使用 Angular 和 UI-Router 来构建网站。

我的页面上有一个菜单侧边栏。一些菜单项有子菜单项，所以我尝试实现折叠功能以在用户单击父菜单项时显示子菜单项。

在我的父菜单项中，当用户单击菜单链接时，它应该显示子菜单项。问题是当用户点击链接时，它会更改 url 并重定向到主页。

为了更好地理解，我提供了一个 HTML 示例。

<li>
    <a href="#">Menu Item 1</a>
    <ul>
        <li><a href="#">link1</a></li>
        <li><a href="#">link2</a></li>
    </ul>
</li>

【问题讨论】：

标签： html angularjs angular-ui-router

【解决方案1】：

从href 中删除#，如下所示：

<li>
    <a href="">Menu Item 1</a>
    <ul>
        <li><a href="">link1</a></li>
        <li><a href="">link2</a></li>
    </ul>
</li>

或者，将它们替换为span 标记并使用cursor: pointer 设置它们的样式。我不确定哪一个在语义上更有效，但任何一个都可以。

【讨论】：

【解决方案2】：

删除 href 并替换为 ng-href（角度 href 良好做法）

<li>
    <a ng-href="/iwannago/tonexpage">Menu Item 1</a>
    <ul>
        <li><a ng-href="">link1</a></li>
        <li><a ng-href="">link2</a></li>
    </ul>
</li>

使用角度值是一种很好的做法并获得支持，因为 ng-** 关键字标签等来自角度系列

【讨论】：

拥有 ng-href 没有任何意义，因为我们对 href 属性没有任何绑定