Bootstrap navbar не разрушается в среде AngularJS

Question

В моем проекте я использовал навигационную панель Bootstrap для навигации, а также 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>

Я перепробовал много решений, но все равно ничего не получилось.

Вы можетепосмотрите реальный пример здесь .

Я попробовал несколько примеров кода Angular, а также решения на основе JS.У меня ничего не работает.Можете ли вы предоставить мне рабочий образец NavBar с Angular.Моя версия Angular 1.3 и Bootstrap 3.x

Answer 1

Предупреждение: это очень хакерское решение, но оно должно работать очень хорошо.

Как сказано в комментариях, сложно объединить обе логики.

Просто используйтеng-click="isCollapsed = false" событие для каждого элемента navbar:

<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 переопределяет ng-click в Angular.JS .По сути, вы также можете перемещать все внутри функции, такой как collapseAndMove(href), и выполнять там операции маршрутизации и свертывания.