2016-07-30 73 views
0

我正在尝试使用Angular的bootstrap.css。我引用了Twitter Bootstrap Navbar with AngularJS - Collapse Not Functioning,但是当我尝试实现此代码时,我的导航栏不会折叠,并且下拉列表也不起作用。Navbar没有崩溃的角度

代码:

<nav id="navbar-example" class="navbar navbar-inverse navbar-static" role="navigation" ng-controller="NavBarCtrl"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <button class="navbar-toggle" type="button" ng-click="isCollapsed = !isCollapsed"> 
     <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="#">Title</a> 
    </div> 
    <div collapse="isCollapsed" class="navbar-collapse bs-js-navbar-collapse"> 
     <ul class="nav navbar-nav"> 
     <li><a href="">home</a></li> 
     <li class="dropdown"> 
      <a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> 
      <ul class="dropdown-menu" role="menu" aria-labelledby="drop1"> 
      <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li> 
      <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a></li> 
      </ul> 
     </li> 
     </ul> 
     <ul class="nav navbar-nav navbar-right"> 
     <li id="fat-menu" class="dropdown"> 
      <a href="#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 3 <b class="caret"></b></a> 
      <ul class="dropdown-menu" role="menu" aria-labelledby="drop3"> 
      <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li> 
      </ul> 
     </li> 
     </ul> 
    </div><!-- /.nav-collapse --> 
    </div><!-- /.container-fluid --> 
</nav> 

var myApp = angular.module('myApp', ['ui.bootstrap']); 

function NavBarCtrl($scope) { 
    $scope.isCollapsed = true; 
} 

为什么不是崩溃吗?这是JSFiddle

+0

你确定你添加了angular js脚本吗?它不存在于jsfiddle ..