Angular ui-bootstrap：下拉列表不适用于版本0.13.3

Question

I was successfully using ui-bootstrap's dropdown menu with version 0.11.0 as follows:

<ul class="nav navbar-nav navbar-right">
                        <li class="dropdown">
                            <a href='#' class="dropdown-toggle"><i class="fa fa-cogs"></i> Hi {{"{{user.fName}}"}} !<span class="caret"></span></a>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="settings">My Account</a></li>
                              <!--   <li class="divider"></li> -->
                                <li><button class="btn btn-danger btn-block" onclick="LogOut()">Log Out</button></li>
                            </ul>
                        </li>
                    </ul>

But, I needed to use datepicker's month mode which required me to upgrade to 0.13.3 . Here's my other question explaining that. Here's a common plunker .

But, now my dropdown menu has stopped working. On clicking it, no dropdown shows but also there is no error. Any idea how I should tackle this?

Answer 1

To fix this, you have to use the directive dropdown, not only the class.

 <li class="dropdown" dropdown>
      <a class="dropdown-toggle" dropdown-toggle>
             <i class="fa fa-cogs"></i> Hi !
             <span class="caret"></span>
      </a>
      <ul class="dropdown-menu" role="menu">
          <li><a href="settings">My Account</a></li>
          <!--   <li class="divider"></li> -->
          <li><button class="btn btn-danger btn-block" onclick="LogOut()">Log Out</button></li>
       </ul>
 </li>

Simply add dropdown and dropdown-toggle on your HTML tag will do the trick.

Working Plunker

Answer 2

As suggested by Pierre, I had to add attributes 'dropdown' and 'dropdown-toggle' rather than classes in version 0.13.3 as compared to 0.11.0. Changing the markup from:

<ul class="nav navbar-nav navbar-right">
                        <li class="dropdown">
                            <a href='#' class="dropdown-toggle"><i class="fa fa-cogs"></i> Hi  !<span class="caret"></span></a>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="settings">My Account</a></li>
                              <!--   <li class="divider"></li> -->
                                <li><button class="btn btn-danger btn-block" onclick="LogOut()">Log Out</button></li>
                            </ul>
                    </li>
                </ul>

to

<ul class="nav navbar-nav navbar-right">
                          <li dropdown>
                            <a href='#' dropdown-toggle><i class="fa fa-cogs"></i> Hi {{"{{user.fName}}"}} !<span class="caret"></span></a>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="settings">My Account</a></li>
                              <!--   <li class="divider"></li> -->
                                <li><button class="btn btn-danger btn-block" onclick="LogOut()">Log Out</button></li>
                            </ul>
                        </li>
                    </ul>

did the trick.