响应式下拉导航栏与angular度UI引导（完成在正确的angular度types的方式）
我使用angular-ui-boostrap的模块“ui.bootstrap.dropdownToggle”创build了一个带有下拉导航栏的JSFiddle： http : //jsfiddle.net/mhu23/2pmz5/
<div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <a class="brand" href="#"> My Responsive NavBar </a> <ul class="nav"> <li class="divider-vertical"></li> <li class="dropdown"> <a href="#" class="dropdown-toggle"> Menu 1 <b class="caret"></b> </a> <ul class="dropdown-menu"> <li><a href="#/list">Entry 1</a> </li> <li><a href="#/list">Entry 2</a> </li> </ul> </li> .... </ul> </div> </div> </div> 据我所知，这是实现这样一个下拉菜单适当的，angular度的方式。 就angularjs而言，“错误”的方式是包含bootstrap.js并使用“data-toggle =”dropdown“…我在这里吗？
现在，我想添加响应行为，我的导航栏完成在下面的小提琴： http : //jsfiddle.net/ghtC9/6/
但是，有一些我不喜欢上述解决scheme。 那个人包括bootstrap.js！
那么将响应行为添加到我现有的导航栏中的正确angular度types是什么？
我显然需要使用引导响应式导航栏类，例如“nav-collapse collapse navbar-responsive-collapse”。 但我不知道如何…
我真的很感谢你的帮助！
先谢谢你！ 迈克尔
你可以使用“collapse”指令来实现： http : //jsfiddle.net/iscrow/Es4L3/ （检查HTML中的两个“注释”）。
<!-- Note: set the initial collapsed state and change it when clicking --> <a ng-init="navCollapsed = true" ng-click="navCollapsed = !navCollapsed" class="btn btn-navbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <a class="brand" href="#">Title</a> <!-- Note: use "collapse" here. The original "data-" settings are not needed anymore. --> <div collapse="navCollapsed" class="nav-collapse collapse navbar-responsive-collapse"> <ul class="nav">
也就是说，您需要将折叠状态存储在variables中，并通过（简单地）更改该variables的值来更改折叠状态。
版本0.14为组件添加了一个uib-前缀：
https://github.com/angular-ui/bootstrap/wiki/Migration-guide-for-prefixes
更改： collapse到uib-collapse 。
更新2015-06
根据antoinepairet的评论/例子 ：
使用uib-collapse属性提供了animation： http : uib-collapse
<nav class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <!-- note the ng-init and ng-click here: --> <button type="button" class="navbar-toggle" ng-init="navCollapsed = true" ng-click="navCollapsed = !navCollapsed"> <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="#">Brand</a> </div> <div class="collapse navbar-collapse" uib-collapse="navCollapsed"> <ul class="nav navbar-nav"> ... </ul> </div> </nav>
古..
我发现这个问题是以BS2为框架的，但是我认为我会使用基于ui.bootstrap问题394中的build议的ng-class解决scheme来使用Bootstrap 3的解决scheme：
官方bootstrap例子唯一的变化就是添加下面的注释中指出的ng-属性：
<nav class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <!-- note the ng-init and ng-click here: --> <button type="button" class="navbar-toggle" ng-init="navCollapsed = true" ng-click="navCollapsed = !navCollapsed"> <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="#">Brand</a> </div> <!-- note the ng-class here --> <div class="collapse navbar-collapse" ng-class="{'in':!navCollapsed}"> <ul class="nav navbar-nav"> ...
这是一个更新的工作示例： http : //plnkr.co/edit/OlCCnbGlYWeO7Nxwfj5G?p=preview （帽子提示拉尔斯）
这似乎适用于我简单的用例，但你会在这个例子中注意到第二个下拉菜单被切断了……祝你好运！
不知道是否有人有相同的响应问题，但这只是一个简单的CSS解决scheme。
同样的例子
... ng-init="isCollapsed = true" ng-click="isCollapsed = !isCollapsed"> ... ... div collapse="isCollapsed"> ...
同
@media screen and (min-width: 768px) { .collapse{ display: block !important; } }
我使用angular-ui bootstrap（当更新到angular 1.5和ui-bootrap 1.2.1时）提供响应式/下拉式导航栏，
index.html
... <link rel="stylesheet" href="/css/app.css"> </head> <body> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <input type="checkbox" id="navbar-toggle-cbox"> <div class="navbar-header"> <label for="navbar-toggle-cbox" class="navbar-toggle" ng-init="navCollapsed = true" ng-click="navCollapsed = !navCollapsed" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </label> <a class="navbar-brand" href="#">Project name</a> <div id="navbar" class="collapse navbar-collapse" ng-class="{'in':!navCollapsed}"> <ul class="nav navbar-nav"> <li class="active"><a href="/view1">Home</a></li> <li><a href="/view2">About</a></li> <li><a href="#">Contact</a></li> <li uib-dropdown> <a href="#" uib-dropdown-toggle>Dropdown <b class="caret"></b></a> <ul uib-dropdown-menu role="menu" aria-labelledby="split-button"> <li role="menuitem"><a href="#">Action</a></li> <li role="menuitem"><a href="#">Another action</a></li> </ul> </li> </ul> </div> </div> </div> </nav>
app.css
/* show the collapse when navbar toggle is checked */ #navbar-toggle-cbox:checked ~ .collapse { display: block; } /* the checkbox used only internally; don't display it */ #navbar-toggle-cbox { display:none }
- 有缺陷的angular度ui bootstrap指令模板
- 如何通过$ http将angular-ui的typeahead与服务器绑定以进行服务器端优化？
- Angular引导dateselect器date格式不会格式化ng模型值
- 我应该使用Angular UI Bootstrap还是纯Bootstrap 3？
- 在Angular中处理Accordion的打开/折叠事件
- angularjs：防止Bootstrap莫代尔消失，当点击外面或按逃生？
- Angularjs $ state在新标签中打开链接
- Angular js – route-ui添加默认参数
- Datepicker不会在angular-ui版本0.11.0中打开两次
