javascript - One bootstrap dropdown works, and the other doesnt on the same page -
i've got navbar 2 dropdown elements in it, controlled bootstrap-ui.
the strange thing 1 working , other not. code coming mean.js boilerplate, familiar know way around. suspect order of bootstrap javascript files. here order:
<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> and here offending code
//this guy isn't working @ 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 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> does have idea whats going on here?
i'm using bootstap-ui v 0.12.1 in case makes difference .
you loading 'competing' libraries. first, angular ui bootstrap library meant replace bootstrap javascript implementation (see philosophy section here), remove:
<script type="text/javascript" src="lib/bootstrap/dist/js/bootstrap.js"></script> second, there 2 angular ui bootstrap packages, 1 includes directive templates, , 1 without (details explained here), remove:
<script type="text/javascript" src="lib/angular-bootstrap/ui-bootstrap.js"></script> what occurring 3 libraries attached own close/open handlers dropdown , fighting each other.
Comments
Post a Comment