Angularjs 引导:可折叠导航栏不';行不通
我有一个用yeoman gulp angular generator构建的webapp,它使用bootstrap(带sass) 我有一个可折叠的导航条。当我单击带有3个图标栏的按钮时,菜单不会按预期显示 我已经分别测试了我的html,效果很好。起作用的小提琴是: 代码是:Angularjs 引导:可折叠导航栏不';行不通,angularjs,twitter-bootstrap-3,Angularjs,Twitter Bootstrap 3,我有一个用yeoman gulp angular generator构建的webapp,它使用bootstrap(带sass) 我有一个可折叠的导航条。当我单击带有3个图标栏的按钮时,菜单不会按预期显示 我已经分别测试了我的html,效果很好。起作用的小提琴是: 代码是: <nav class="navbar navbar-default navbar-inverse navbar-static-top navbar-inverse-main" role="navigation">
<nav class="navbar navbar-default navbar-inverse navbar-static-top navbar-inverse-main" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigationbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<p class="navbar-brand">Merchandising Control</p>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-menu" id="navigationbar">
<ul class="nav navbar-nav navbar-right">
<!-- Airline code label -->
<li><a href="#">Airline:</a></li>
<!-- Airline code dropdown -->
<li class="dropdown" dropdown>
<a class="dropdown-toggle" dropdown-toggle>{{MainCtrl.getAirlineCode()}} <span class="caret"></span></a>
<ul class="dropdown-menu dropdown-menu-main">
<li ng-repeat="airlineCode in MainCtrl.MAIN_UI_CONSTANTS().airlineCodes" ng-click="MainCtrl.setAirlineCode(airlineCode)">
<a>{{airlineCode.value}}</a>
</li>
</ul>
</li>
</ul>
</div> <!-- /.navbar-collapse -->
</div> <!-- /.container-fluid -->
</nav>
切换导航
-
{{MainCtrl.getAirlineCode()}}
-
{{airlineCode.value}
看来我的安装不正确
有人能帮我吗
关于。虽然Bootstrap的js在HTML元素上使用
数据-*
属性来启用导航栏上的展开/折叠(当您有角度应用程序时,应该使用导航栏而不是Bootstrap的js),但其工作方式并不完全相同。您可以查看Angular UI Bootstrap关于折叠的文档,了解其工作原理,但简而言之,您应该做以下几点:
切换导航
-
{{MainCtrl.getAirlineCode()}}
-
{{airlineCode.value}
请将angularjs
代码包含在jsidle
中。