我正在使用 Angular 和 Twitter Bootstrap 导航栏,并尝试让折叠功能正常工作。
部分:program.html
<div class="navbar navbar-inverse navbar-static-top" ng-include="'partials/navbar.html'" ng-controller="NavbarCtrl"></div>
部分: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 函数加载数据并将特定项目标记为活动并完美填充模型。唯一不起作用的是响应式折叠功能。当我调整屏幕大小时,菜单项消失并出现菜单图标,但单击它不起作用。我被困在这个问题上,我知道这必须是一个简单的修复,但我就是想不通。任何帮助,将不胜感激!
对于那些感兴趣的人 - 这是另一种不使用 Bootstrap 的 javascript 实现此目的的方法。
导入 Angular 的UI引导程序.
HTML:
<div class="navbar navbar-inverse" ng-controller="NavBarCtrl">
<div class="navbar-inner">
<div class="container">
<button class="btn btn-navbar" ng-click="isCollapsed = !isCollapsed">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button> <a class="brand" href="#">Short Course</a>
<div class="nav-collapse" uib-collapse="isCollapsed">
<ul class="nav">
<li><a href="#"><i class="icon-home icon-white"></i> Home</a>
</li>
<li><a href="#">Lessons</a>
</li>
<li><a href="#">Grades</a>
</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 -->
</div>
JS:
var myApp = angular.module('myApp', ['ui.bootstrap']);
function NavBarCtrl($scope) {
$scope.isCollapsed = true;
}
还有小提琴——http://jsfiddle.net/KY5Mf/ http://jsfiddle.net/KY5Mf/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)