使用Angular UI Bootstrap时如何在ASP.NET MVC中修复汉堡菜单

Question

ASP.NET MVC默认模板包括一个汉堡包菜单，当在较小宽度的设备上查看页面时，该菜单将可见。它不仅依赖于bootstrap.css，还依赖于bootstrap.js的显示/隐藏导航菜单的能力。

对于AngularJS，我们需要使用ui-bootstrap.js，并被建议排除Twitter的原生bootstrap.js。

在大多数情况下，这很好用，但汉堡菜单就没什么用了。什么是最优雅的方式来连接汉堡包菜单，以表现与以前一样？

Answer 1

我进一步尝试了这一点，uib- with似乎是一个很好的解决方案。

首先，在按钮的ng-click事件中添加一个切换变量。

<button type="button" class="navbar-toggle" ng-click="navMenuIsCollapsed = !navMenuIsCollapsed">

其次，使用该变量在菜单元素上应用uib-collapse。

<div class="navbar-collapse" uib-collapse="navMenuIsCollapsed">

这适用于UI Bootstrap v0.14.3。较早的版本可能会使用不同的名称命名uib-collapse指令。