15

The used version is the following.
・AngularJS 1.2.16
・Bootstrap3.1.1
・AngularUI Bootstratp 0.11.0

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

<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">menu</a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="userMenu">
    <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#" class="">one</a></li>
    <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#" class="">two</a></li>
    <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#" class="">three</a></li>
  </ul>
</li>

If it carries out, a click will be needed for Dropdown of Navbar twice. (Unless it double-clicks menu, one, two, and three are not displayed. )

Then, when lowering the version of the script to be used, it was able to use satisfactorily.
・3.1.0 bootstrap.min.js
・0.10.0 ui-bootstrap-tpls.min.js

I want you to teach how if it carries out, it can display by one click.

otera
  • 432
  • 5
  • 17

1 Answers1

46

The short answer:

You should not be using the bootstrap.js with the angular-ui-bootstrap.js library. Both libraries are working to display/hide the dropdown on the click event.

The long answer:

The dropdown-menu class sets the display attribute to none. The boostrap.js library attaches a click event to elements with a data-toggle="dropdown" attribute. The click event then checks to see if the parent element has an open class. If the open class exists, remove it, otherwise add the open class. The 'open' class sets the css display attribute to block on child elements with a class of dropdown-menu thus overriding the original value of none.

The angular-ui-bootstrap.js library is also adding/remove the open class on the toggle click event in the same manner. So one library adds the open class, the other library promptly removes it, thus resulting in the original css display attribute of none in the dropdown-menu class.

Rob J
  • 6,609
  • 5
  • 28
  • 29
  • It is that if you use the angular-ui-bootstrap.js, and that do not use the bootstrap.js. Thank you for answer. – otera Jun 09 '14 at 13:21
  • Brilliant! This was driving me crazy. – iTrout Jul 08 '14 at 11:40
  • you have no idea how much time I lost on trying to solve this. Thanks! – sscarduzio Aug 01 '14 at 15:32
  • 1
    After reading Rob J's answer, I removed , data-toggle = dropdown from the html thinking it will not execute bootstrap part for the dropdown and allow ui.bootstrap to work alone - and it worked! Is this a good practice? Thanks for the answer btw! – JRulz Aug 18 '14 at 04:27
  • 2
    @JRulz That may solve the dropdown problem, but using both libraries will introduce problems in other directives (datepicker) as well and is not recommended. – Rob J Aug 18 '14 at 12:20
  • those how want to use both can see http://stackoverflow.com/questions/24218663/avoid-having-to-double-click-to-toggle-bootstrap-dropdown – rjdmello Sep 08 '14 at 10:40
  • When (or if) they cut another release, this issue will be addressed by this [commit](https://github.com/angular-ui/bootstrap/commit/7512b93fecb6f27df4f5aeba4c756c0c36aebbf2). I still don't understand why anyone would use the bootstrap.js library when using the angular-ui-bootstrap.js library. – Rob J Sep 08 '14 at 13:30