javascript - Bootstrap 导航栏在 AngularJS 环境中不会折叠

Question

在我的元素中，我使用 Bootstrap Nav bar 进行导航，还使用 ​​AngularJS 作为框架。在桌面 View 中，它工作正常。但在移动 View 中，导航栏无法正常工作。单击链接时不会自动折叠。

这是我的导航条码:

<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

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

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

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