twitter-bootstrap 切换按钮不适用于 AngularJS 和 Angular ui Bootsrap
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21540903/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Toggle button is not working with AngularJS and Angular ui Bootsrap
提问by Sami
The toggle button appears but it is not working. I've got a same code now in online as well and it is not working but in Plunker it is working.
切换按钮出现，但它不起作用。我现在在网上也有相同的代码，但它不起作用，但在 Plunker 中它起作用了。
Plunker - toggle button is working
Same code online - button is not working
And the code is:
代码是：
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="nalogo-wrapper">
<img class="img-responsive" src="http://placehold.it/50x50&text=Logo" />
</div>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="#/view1"><span class="glyphicon glyphicon-home"></span> Etusivu</a></li>
<li><a href="#/view2">Palvelut</a></li>
<li><a href="#/view3">Yhteistiedot</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div id="main">
<div ng-view>
</div>
</div>
Thanks for help! Sami
感谢帮助！萨米人
回答by Josh C.
I just copied this out of a working project where I used angular-ui bootstrap:
我刚刚从一个使用 angular-ui bootstrap 的工作项目中复制了这个：
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle btn navbar-btn" 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="/#">Bake-Off</a>
</div>
<div collapse="navCollapsed" class="navbar-collapse collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li><a href="#" >Link 1</a></li>
<li><a href="#" >Link 2</a></li>
<li></li>
</ul>
<div class="container navbar-form navbar-right">
</div>
</div>
<!--/.navbar-collapse -->
</div>
</div>
回答by iH8
You must make some changes to your navbar to accomodate the collapse directive of Angular UI-Bootstrap. I wondered about this myself not so long ago, the question was already asked and answered over here:
您必须对导航栏进行一些更改以适应 Angular UI-Bootstrap 的折叠指令。不久前我自己也想过这个问题，这里已经有人提出并回答了这个问题：
Responsive dropdown navbar with angular-ui bootstrap (done in the correct angular kind of way)
回答by Hetdev
Adding an alternative solution to the answer of Josh C, just changing the collapse to uib-collapse, based on the latest documentation
为Josh C的答案添加一个替代解决方案，只是将collapse更改为uib-collapse，基于最新文档
https://angular-ui.github.io/bootstrap/#!#collapse
https://angular-ui.github.io/bootstrap/#!#collapse
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle btn navbar-btn" 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="/#">Bake-Off</a>
</div>
<div uib-collapse="navCollapsed" class="navbar-collapse collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li><a href="#" >Link 1</a></li>
<li><a href="#" >Link 2</a></li>
<li></li>
</ul>
<div class="container navbar-form navbar-right">
</div>
</div>
<!--/.navbar-collapse -->
</div>
</div>
