Bootstrap Dropdown 与 Angular Routing 一起滚动答案

【问题标题】：Bootstrap Dropdown scrolling alongwith Angular RoutingBootstrap Dropdown 与 Angular Routing 一起滚动
【发布时间】：2023-03-03 05:22:20
【问题描述】：

我正在创建一个使用引导程序和角度的网站。我正在使用角度路由并根据需要在索引页面上加载自定义视图。我遇到的问题是由于路由，标题中的菜单下拉菜单已停止工作。这是标题的代码：

<nav class="col-lg-12 col-md-12 col-sm-12 col-xs-12 navbar navbar-inverse navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <div uib-dropdown>
                    <a href="#side" class="btn btn-default btn-primary navbar-toggle pull-left" data-toggle="collapse" data-target="side" uib-dropdown-toggle>
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>  
                        <span class="icon-bar"></span>
                    </a>
                </div>
                <a class="navbar-brand" href="#/">Company Logo</a>
            </div>
            <ul id="side" class="nav navbar-nav collapse hidden-lg hidden-md hidden-sm" uib-dropdown-menu>
                <li><a href="#/">Home</a></li>
                <li><a href="#/stuff">Stuff</a></li>
                <li><a href="#/list">List Example</a></li>
                <li><a href="#/contact">Contacts</a></li>
                <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">User <span class="caret"> </span> </a> 
                    <ul class="dropdown-menu">
                        <li><a href="#/">Profile</a></li>
                        <li><a href="#/">Logout</a></li>
                    </ul>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right hidden-xs">
                <li class="dropdown"><a href="#/" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">User <span class="caret"> </span> </a> 
                    <ul class="dropdown-menu">
                        <li><a href="#/">Profile</a></li>
                        <li><a href="#/">Logout</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </nav>

在路由之前，单击切换按钮（仅在较小的屏幕上可见）将引用 id 为“side”的 ul，并将其显示为下拉列表。但是现在由于已经配置了 URL 路由，单击切换按钮会将 url 更改为 #/side。我不希望这种情况发生，因为没有 URL #/side，这样下拉菜单也不会打开。
我试过使用 location.hash() 和 $anchorScroll 但这没有用。包括 angular-ui 属性（例如 uib-dropdown、uib-dropdown-menu 等）已经改变了切换按钮的行为，因此它现在只能被点击。菜单打不开。

有人可以解释我必须做什么才能让它工作吗？帮助将不胜感激！

编辑这是几个屏幕截图，向您展示我的意思：

我能做些什么来防止这种情况发生？

【问题讨论】：

你能做一个小提琴，plunkr 来展示一下
@MandeepSingh 当我尝试将所有内容放入 plunker 时，UI 会中断。很抱歉，我不知道如何将应用程序的全部功能转移到 plunker
让我附上图片来说明我的意思
你想删除# ??
你是否包含了 bootstrap.js

标签： angularjs angular-ui-bootstrap url-routing

【解决方案1】：

这就是我解决问题的方法（感谢 Mandeep Singh 的帮助）：

在配置路由的app.js文件中，我添加了如下sn-p：

    .otherwise({
        redirectTo: '/'
    });

确保无论何时单击切换按钮，都不会重定向 URL 以显示按钮的 ID。即现在，只要按下 ID 为“side”的按钮来切换下拉菜单，URL 就会保持不变。
除此之外，我没有将 bootstrap.js 和 jquery 与我的 index.html 文件链接。这也引起了问题。
我做的最后一件事是使用带有标签的 UI Bootstrap (See detail about this here)

【讨论】：