我有一个导航栏,里面有两个下拉元素,由 bootstrap-ui 控制。
奇怪的是,一个在工作,另一个不工作。这段代码来自 mean.js 样板文件,所以熟悉它的人都会知道他们的方法。我怀疑它与 Bootstrap javascript 文件的顺序有关。这是我的订单:
<script type="text/javascript" src="lib/jquery/dist/jquery.js"></script>
<script type="text/javascript" src="lib/bootstrap/dist/js/bootstrap.js"></script><script type="text/javascript" src="lib/angular/angular.js"></script>
<script type="text/javascript" src="lib/angular-ui-router/release/angular-ui-router.js"></script>
<script type="text/javascript" src="lib/angular-animate/angular-animate.js"></script>
<script type="text/javascript" src="lib/angular-bootstrap/ui-bootstrap.js"></script>
<script type="text/javascript" src="lib/angular-bootstrap/ui-bootstrap-tpls.js"></script><script type="text/javascript" src="lib/angular-resource/angular-resource.js"></script>
<script type="text/javascript" src="lib/angular-cookies/angular-cookies.js"></script>
<script type="text/javascript" src="lib/angular-touch/angular-touch.js"></script><script type="text/javascript" src="lib/angular-sanitize/angular-sanitize.js"></script>
<script type="text/javascript" src="lib/angular-ui-utils/ui-utils.js"></script><script type="text/javascript" src="lib/angular-ui-bootstrap-datetimepicker/datetimepicker.js"></script>
这是有问题的代码
//This guy isn't working at all!!
<nav class="collapse navbar-collapse" collapse="!isCollapsed" role="navigation">
<ul class="nav navbar-nav" data-ng-if="menu.shouldRender(authentication.user);">
<li data-ng-repeat="item in menu.items | orderBy: 'position'" data-ng-if="item.shouldRender(authentication.user);" ng-switch="item.menuItemType" ui-route="{{item.uiRoute}}" class="{{item.menuItemClass}}" ng-class="{active: ($uiRoute)}" dropdown="item.menuItemType === 'dropdown'">
<a ng-switch-when="dropdown" class="dropdown-toggle">
<span data-ng-bind="item.title"></span>
<b class="caret"></b>
</a>
<ul ng-switch-when="dropdown" class="dropdown-menu">
<li data-ng-repeat="subitem in item.items | orderBy: 'position'" data-ng-if="subitem.shouldRender(authentication.user);" ui-route="{{subitem.uiRoute}}" ng-class="{active: $uiRoute}">
<a href="/#!/{{subitem.link}}" data-ng-bind="subitem.title"></a>
</li>
</ul>
<a ng-switch-default href="/#!/{{item.link}}" data-ng-bind="item.title"></a>
</li>
</ul>
//This guy is working no problem
<ul class="nav navbar-nav navbar-right" data-ng-show="authentication.user">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span data-ng-bind="authentication.user.displayName"></span> <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>
<a href="/#!/settings/profile">Edit Profile</a>
</li>
<li>
<a href="/#!/settings/accounts">Manage Social Accounts</a>
</li>
<li data-ng-show="authentication.user.provider === 'local'">
<a href="/#!/settings/password">Change Password</a>
</li>
<li class="divider"></li>
<li>
<a href="/auth/signout">Signout</a>
</li>
</ul>
</li>
</ul>
</nav>
有人知道这里发生了什么吗?
我使用的是 bootstap-ui v 0.12.1 以防有差异。
最佳答案
您正在加载“竞争”库。首先,Angular UI Bootstrap 库旨在替换 Bootstrap javascript 实现(参见哲学部分 here),因此删除:
<script type="text/javascript" src="lib/bootstrap/dist/js/bootstrap.js"></script>
其次,有 2 个 Angular UI Bootstrap 包,一个包含指令模板,一个不包含(详细说明 here),所以删除:
<script type="text/javascript" src="lib/angular-bootstrap/ui-bootstrap.js"></script>
最有可能发生的情况是,这 3 个库都为下拉菜单附加了自己的关闭/打开处理程序,并且它们相互争斗。
关于javascript - 一个 bootstrap 下拉菜单有效,而另一个不在同一页面上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30247626/