Панель навигации Bootstrap не сворачивается в среде AngularJS
В моем проекте я использовал панель навигации 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
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 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 переопределяет ng-щелчок в Angular.js. По сути, вы также можете перемещать все внутри функции, такой как collapseAndMove(href), и выполнять там маршрутизацию и свертывание.
лучше не использовать jQuery с AngularJS, это не часть цикла дайджеста. AngularJS может выполнять манипуляции с DOM в директивах, использующих JQLite. Самое простое решение: переключить jQuery Bootstrap на
ui-bootstrap