Menu
According to http://getbootstrap.com/javascript/#dropdowns events (e.g., show.bs.dropdown, hide.bs.dropdown) are thrown when a drowdown is opened/closed. This works until module bootstrap-ui is active. I created a plunkr that shows the issue http://plnkr.co/edit/luYpweQZx22IkWHeMKhM. The events are thrown when the dependency to ui.boostrap is removed, that is
var app = angular.module('myapp', ['ui.bootstrap']);
is replaced with
var app = angular.module('myapp', []);
Versions are: Bootstrap 3.0.3, Angular 1.2.4 (also tested with 1.2.13), Angular UI Bootstrap 0.10.0, JQuery 2.0.3
Seems to be a bug in bootstrap-ui, any ideas for a workaround?
602
Solution : The dropdown should be toggled via data attributes or using javascript. In the above program, we have forgotten to add a data attribute so the dropdown is not working. So add data-bs-toggle="dropdown" to toggle the dropdown.
To open the dropdown menu, use a button or a link with a class of . dropdown-toggle and the data-toggle="dropdown" attribute. Add the . dropdown-menu class to a <div> element to actually build the dropdown menu.
Just wrap the contents of the menu in a form tag. That's it. So, instead of ul. dropdown-menu , use form.
Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They're made interactive with the included Bootstrap dropdown JavaScript plugin. They're toggled by clicking, not by hovering; this is an intentional design decision.
Bootstrap UI must have over ridden the Bootstrap default js events
I wrote some code to do it .. it might atleast give you some idea
http://plnkr.co/QYKcPEepOrqdyXzfrekH
190
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
