引导导航栏在AngularJs
我想这个教程实现Navbar in AngularJS引导导航栏在AngularJs
导航栏代码
<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-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="#">Brand</a>
</div>
<div class="collapse navbar-collapse" uib-collapse="navCollapsed">
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
</li>
</ul>
<ul class="nav navbar-nav navbar-right" ng-controller="LoginController">
<li><a href="#/register">Register</a></li>
<li><a href="#/">Login</a></li>
</ul>
</div>
</div>
</nav>
依存列表
"dependencies": {
"angular": "^1.6.2",
"angular-route": "^1.6.2",
"angular-cookies": "^1.6.2",
"angular-translate": "^2.14.0",
"angular-translate-loader-static-files": "^2.14.0",
"angular-animate": "^1.6.2",
"angular-touch": "^1.6.2",
"angular-bootstrap": "^2.5.0",
"bootstrap": "^3.3.7"
}
问题是:它不工作在移动设备上。它显示就像我要求的桌面视图。我修整看到拨动导航栏
我的网页网址:http://pankajservers.in
我这么想吗?
第一总而言之,有一个最低限度的工作示例是有帮助的。你需要猜测你是否正确包含了角度,引导程序和ui-bootstrap。
我测试了它与您在依赖项中提到的相同的角度,ui-bootstrap和引导版本。
如果您以聪明的方式取消注释某些标签,则代码甚至可以正常工作。
封装未排序列表的div容器会引起混乱。使用Firebug时,您可以看到汉堡包菜单正在运行,但是您的用户界面项目并未显示出来。
<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-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="#">Brand</a>
</div>
<div class="collapse navbar-collapse" uib-collapse="navCollapsed">
<!-- Collect the nav links, forms, and other content for toggling -->
<!-- comment out the div block, this messes things up -->
<!-- <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">-->
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<!-- I excluded the controller for testing purposes -->
<!-- ng-controller="LoginController"> -->
<li><a href="#/register">Register</a></li>
<li><a href="#/">Login</a></li>
</ul>
<!-- exclude this here -->
<!--</div>-->
</div>
难道是你有错误的npm包angular-ui-boostrap?我的导航组件几乎完全相同并且可行。唯一的区别是,在您的package.json您所列出的“角引导”,在那里我的是
"dependencies": {
"angular": "^1.6.1",
"angular-animate": "^1.6.1",
"angular-route": "^1.6.1",
"angular-ui-bootstrap": "^2.4.0",
"express": "^4.14.0",
"greenlock-express": "^2.0.8",
"webpack": "^1.14.0",
"webpack-dev-server": "^1.16.2"
},
注意我用角UI的引导,而不是角引导
我不使用亭子,但搜索自己的包我看到有指向同一个包两个不同的回购......让我再带你的代码看看... –
展望在您的navcontroller我没有看到任何地方宣布折叠。我是否错过了它或在其他地方宣布过? –
检查出迈克尔的回答 –
这应该纠正它,也适用于我。不能相信我看不到那个,但是你已经添加了class =“navbar navbar-collpase”两次。 –
“不适用于Anrdoid”......您使用的浏览器是什么?工作与否取决于设备浏览器的渲染引擎。尝试清除缓存。 – MichaelHuelsen
该网站未显示响应模式,您处于桌面模式。 – MichaelHuelsen