19

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.

user2789284
  • 751
  • 1
  • 11
  • 28

1 Answers1

42

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

PSL
  • 123,204
  • 21
  • 253
  • 243
  • 1
    Thanks, @user2789284! For other readers, the change log of the official repo https://github.com/angular-ui/bootstrap/blob/master/CHANGELOG.md is a bit unclear giving only the dropdown-toggle as an example. But you will need to change the dropdown directive as well. – Roy Milder Jan 14 '15 at 09:12
  • 2
    You totally nailed it. Thanks a million. – Paulo Pedroso May 24 '15 at 02:53
  • 1
    Thanks a million. these guys need to get it together, #0.11.0 won't fire typeahead-on-select event, #0.12.0 now have this without documentation. cost me 6 hours. – Femi Oni Jun 30 '15 at 18:15
  • I simplified a little your code: `class="dropdown-menu"` seems to be not needed, the same for `dropdown-menu` attribute. I don't know why, but I don't like to write unnecessary code. – Esteve Jul 09 '15 at 13:15
  • I know it's a year later....but man, you saved me. Thanks so much. I'm dreading going to 0.14.x with all the uib prefixes, so I'll hold at 13.4 now that you've solved this. – iTrout Jan 27 '16 at 22:33