响应式下拉导航栏与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

更改: collapseuib-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 }