我正在使用Angular和Twitter Bootstrap导航栏并尝试使折叠功能正常工作 .
Partial: program.html
<div class="navbar navbar-inverse navbar-static-top" ng-include="'partials/navbar.html'" ng-controller="NavbarCtrl"></div>
Partial: navbar.html
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Short Course</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li><a href="#"><i class="icon-home icon-white"></i> Home</a></li>
<li class="dropdown ng-class: settingsActive;">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Intro <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a onclick='$("#myModal").modal("show");'>User Info</a></li>
<li><a href="#/setup">Settings</a></li>
<li><a href="#/get-started">Getting started</a></li>
</ul>
</li>
<li class="dropdown ng-class: programActive;" ng-controller="ProgramCtrl">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Lessons <b class="caret"></b></a>
<ul class="dropdown-menu">
<li ng-repeat='o in lessonTypes'>
<a href="#/program/{{o.value}}">{{o.title}}</a>
</li>
<li class="divider"></li>
<li><a href="#/freeform">Free Form</a></li>
</ul>
</li>
<li class="dropdown ng-class: reportsActive;">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Grades <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Simple Report</a></li>
<li><a href="#">Comprehensive Report</a></li>
<li class="divider"></li>
<li><a href="#">Current Grade Report</a></li>
<li><a href="#">Final Grade Report</a></li>
</ul>
</li>
</ul>
<ul class="nav pull-right">
<li><a href="#/class"><i class="icon-upload icon-white"></i> Upload/Save</a></li>
<li><a href="#/class"><i class="icon-off icon-white"></i> Save/Logout</a></li>
</ul>
</div><!-- /.nav-collapse -->
</div>
</div><!-- /navbar-inner -->
导航栏显示完美 . 下拉菜单效果很好 . Angular函数加载数据并将特定项标记为活动,并完美填充模型 . 唯一不起作用的是响应式折叠功能 . 当我调整屏幕大小时,菜单项会消失并显示菜单图标,但单击它不起作用 . 我坚持这个,我知道它必须是一个简单的解决方案,但我无法弄明白 . 任何帮助,将不胜感激!
8 回答
对于那些感兴趣的人 - 这是在没有Bootstrap的javascript的情况下实现这一点的另一种方式 .
导入Angular的 UI-Bootstrap .
HTML:
JS:
小提琴 - http://jsfiddle.net/KY5Mf/
我想让它与纯AngularJS一起工作,没有更多的JavaScript库,结果很简单 . 从example here(bootstrap v3)开始,只需要进行两项更改:
代替
我用了:
而不是
我用了:
下拉菜单
此外,如果您的导航栏中有任何下拉菜单,则同样适用于它们,除了css类不是“崩溃”,而是“打开”:
请注意,多个下拉列表都需要在角度根范围内拥有自己的状态变量(如果您没有使用控制器) . 因此我在这里命名了第一个下拉列表'dd1',它们需要是唯一的,否则多个下拉列表将同时打开/关闭 . (这很有趣,但很少使用) .
这是一个棘手的问题 . 文档显示了一种方式,它的功能很好 . 我复制了文档示例(http://twitter.github.com/bootstrap/components.html#navbar)并尝试使用它 . 然后我转到示例页面并尝试了此处列出的布局:http://twitter.github.com/bootstrap/examples/fluid.html
唯一的区别是
<button>
而不是<a>
代替
我不知道为什么,但改变它使它功能很好 .
EDIT
Arbiter指出
<a />
缺少href='#'
属性 . 添加该属性也可以解决问题 .无需使用控制器 . 只需使用
ng-init
来初始化模板最初编译时的isCollapsed
标志 .如果您正在寻找
Angular2
. 然后打击是所需的更改 .和菜单应该是这样的 .
你的控制器应该是这样的 .
看,这在
angular2
中比较容易 . 感谢@yankee的回答 .这是一个使用ui.bootstrap.collapse模块的工作实现 . https://jsfiddle.net/7z8hLuyu/
HTML
控制器(使用controllerAs语法):
注意:要使动画在ui.bootstrap模块中工作,必须包含ngAnimate .
我觉得这将是简单的JS修复:
如果此代码无法正常工作,请查看它是否正确绑定,因此将其放在加载页面的控制器中 .
只需将 jquery.min.js and bootstrap.min.js 添加到index.html文件即可解决此问题 .
对于可折叠导航,我们需要包含 jquery.min.js and bootstrap.min.js