问题描述
我在许多方面与UI的路由器的麻烦。我不明白它是如何与其他框架进行交互。
I have trouble with UI-Router in many ways. I don't understand how it interacts with other frameworks.
也就是说,我想实现引导3的导航栏衰减模块,如下图所示:
Namely, I am trying to implement Bootstrap 3's navbar collapse module, seen below:
<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>
<a class="navbar-brand" href="#">Project name test</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
这是直接从引导网站和正常工作时,内部自己的html的网页。
This is straight from the Bootstrap website and it works fine when inside its own .html page.
问题是,当我将它插入UI的路由器视图。倒塌的动作不再工作 - 我猜是因为数据目标功能在某种程度上无法找到它的目标
The issue is when I insert it into a UI-Router view. The collapsing action no longer works -- I'm guessing because the "data-target" function is somehow unable to find its target.
一个人如何使用引导3角UI?该角UI引导包不具有导航栏模块。
How does one use Bootstrap 3 with Angular UI? The Angular UI Bootstrap package does not have a navbar module.
下面的回答是不错的。这里是一个参考网址<一个href=\"http://stackoverflow.com/questions/14741988/twitter-boostrap-navbar-with-angular-js-collapse-not-functioning?rq=1\">Twitter自举导航栏有角JS - 。收起不能正常工作
The answer below is good. Here is a reference URL Twitter Boostrap Navbar with Angular JS - Collapse not functioning.
推荐答案
您应该UI的引导指令替换引导本地JS性能(注意 NG-点击
和崩溃
)
You should replace bootstrap native js properties with ui-bootstrap directives (note the ng-click
and collapse
):
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" ng-click="navbarCollapsed = !navbarCollapsed">
<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="#">
<!-- your branding here -->
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" collapse="navbarCollapsed">
<!-- your normal collapsable content here -->
</div>
</nav>
在你的控制器设定初始值:
Set the initial value in your controller:
$scope.navbarCollapsed = true;
编辑:
新版本用户界面,引导的。调整你的code.因此如。 崩溃
- > UIB崩溃
New versions of ui-bootstrap prefix all compontents. Adjust your code accordingly eg. collapse
-> uib-collapse
.
这篇关于角UI,引导导航栏折叠和Javascript的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!