ui-bootstrap drop down seems to be not working with version 0.12.0

Question

Something seems to have been broken with version 0.12.0 of ui-bootstrap. Here is my plunkr that shows the issue

This works with version 0.11.0

http://plnkr.co/edit/9XJx2c2X7lRSc6V1n5BO?p=preview

With this plunkr if you replace the following line

<script data-require="ui-bootstrap@*" data-semver="0.11.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.min.js"></script>

WITH

<script data-require="ui-bootstrap@*" data-semver="0.12.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.min.js"></script>

then the drop down stops working (when you click). I am not sure if this is a regression or not but any workarounds would really be helpful. 0.12.0 has a bunch of fixes that are important for me and hence I have to upgrade.

Any help is appreciated.

Answer 1

I had gone through the same issue before, found out from the source that directives are not class C restricted anymore. You can provide them as attributes. Since the bootstrap.css also defines the rules for the dropdown with the class names dropdown, dropdown-toggle, dropdown-menu and the directives also used to be class restricted they used to work with just the specification of class names in 0.11.0. But this seems to have been changed with 0.12.0 and the directives are no longer C restricted (instead they follow default directive restriction rule of angular directive, i.e EA restricted for 1.3 and A for 1.2 versions), however css rules remain the same, hence use both.

try:

    <span class="dropdown" dropdown>
    <a href="" class="dropdown-toggle" dropdown-toggle>
        Click
    </a>
    <ul class="dropdown-menu" dropdown-menu>
      <li> 
        <a ng-click="action1()">Action1</a>
      </li>
      <li>
        <a ng-click="action2()">Action2</a>
      </li>
      <li>
        <a ng-click="action3()">Action3</a>
      </li>
      <li>
        <a ng-click="action4()">Action4</a>
      </li>
      <li>
        <a ng-click="action5()">Action5</a>
      </li>
    </ul>

Plnkr