Bootstrap 导航栏在 AngularJS 环境中没有折叠答案

【问题标题】：Bootstrap navbar is not collapsing in AngularJS environmentBootstrap 导航栏在 AngularJS 环境中没有折叠
【发布时间】：2019-03-24 02:44:53
【问题描述】：

在我的项目中，我使用 Bootstrap Nav bar 进行导航，并使用 AngularJS 作为框架。在桌面视图中，它工作正常。但在移动视图中，导航栏无法正常工作。当我们点击一个链接时它不会自动折叠。

这是我的导航条码：

<nav style="padding:0;margin:0;border:0;" class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" ng-init="isCollapsed = true" ng-click="isCollapsed = !isCollapsed">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#/" id="mainLogo">
                <img style="max-width:200px;" src="img/logo.png">
            </a>
        </div>
        <div class="navbar-collapse" ng-class="{collapse: isCollapsed}">
            <ul class="nav navbar-nav">
                <li class="submenu">
                    <a href="#/" class="show-submenu">Home </a>

                </li>
                <li class="submenu">
                    <a href="#/collection/brand/model/type/year" class="show-submenu">Our Collection </a>

                </li>
                <li class="submenu">
                    <a href="#/about" class="show-submenu">About us </a>

                </li>
                <li class="submenu">
                    <a href="#/contact" class="show-submenu">Contact us</a>

                </li>
            </ul>
        </div>
    </div>
</nav>

我尝试了很多解决方案，但仍然没有成功。

您可以查看真实示例here。

我尝试了一些 Angular 代码示例以及基于 JS 的解决方案。没有什么对我有用。您能否为我提供一个使用 Angular 的工作 NavBar 示例。我的 Angular 版本是 1.3，Bootstrap 版本是 3.x

【问题讨论】：

最好不要将 jQuery 与 AngularJS 一起使用，它不是摘要循环的一部分。 AngularJS 可以在使用 JQLite 的指令中进行 DOM 操作。最简单的解决方案：将 jQuery Bootstrap 切换为ui-bootstrap

标签： javascript html css angularjs twitter-bootstrap

【解决方案1】：

警告：这是一个非常老套的解决方案，但它应该工作得很好。

正如 cmets 中所说，很难将这两种逻辑结合起来。

只需在每个导航栏元素上使用ng-click="isCollapsed = false" 事件：

<div class="navbar-collapse" ng-class="{collapse: isCollapsed}">
    <ul class="nav navbar-nav">
        <li class="submenu">
            <a href="#/" ng-click="isCollapsed = false" class="show-submenu">Home </a>
        </li>
        <li class="submenu">
            <a href="#/collection/brand/model/type/year" ng-click="isCollapsed = false" class="show-submenu">Our Collection </a>

        </li>
        <li class="submenu">
            <a href="#/about" ng-click="isCollapsed = false" class="show-submenu">About us </a>
        </li>
        <li class="submenu">
            <a href="#/contact" ng-click="isCollapsed = false" class="show-submenu">Contact us</a>
        </li>
    </ul>
</div>

如果您对href 和ng-click 的组合有疑问，可以查看href overrides ng-click in Angular.js。基本上，您还可以在 collapseAndMove(href) 之类的函数中移动所有内容，并在那里进行路由和折叠。

【讨论】：