Question

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

这是我的Nav条形码：

<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

Answer 1

警告：这是一个非常棘手的解决方案，但是应该可以很好地工作。

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

只需在每个导航栏元素上使用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)之类的函数中，并在那里进行路由和折叠。

Bootstarp导航栏在AngularJS环境中不崩溃

1 个答案: