Question

I am using angular and UI-Router to build a website.

I have a menu sidebar on my page. some of the menu items have sub-menu items, so I am trying to implement collapse functionality to display the sub-menu item when user click on the parent menu item.

In my parent menu item, I have an so when the user clicks on the menu link it should display the sub menu items. the problem is when the user clicks on the link it changes the url and redirects to the homepage.

A sample of my HTML is given to better understand.

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

Answer 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设置样式。我不确定哪一个在语义上更有效，但两者都可以。

Answer 2

删除href并替换为ng-href（angular href good practice）

<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 - ** keywods标签等来自有角度的家庭

使用链接（<a> tags) without changing the url in angularJS

2 个答案: