dropdown of Navbar is double-clicked.

Question

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.

Answer 1

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.