Dropdown's do not work when Toggling with two Buttons

[allentong]

Since updating to 0.12, some of the functionality on my site stopped working.

We had set up two buttons as "dropdown-toggle", but now since we updated I cannot have two button(element) toggles under a single "dropdown" directive.

Adding Plunker later on.

[johnsonw]

I noticed our drop-down button is no longer working as well. If I include the bootstrap.js file it begins working. I'll investigate further and see what I can find.

[johnsonw]

allentong, in my case the reason the drop down stopped working is because we are using a class directive instead of an attribute directive. In angular 1.3.3 the class directive is not supported unless it is specifically declared in the "restrict" property:

Note: When you create a directive, it is restricted to attribute and elements only by default. In order to create directives that are triggered by class name, you need to use the restrict option.

• https://code.angularjs.org/1.3.3/docs/guide/directive

I've created a pull request that adds support for triggering off css classes on the dropdown component. Please review the pull request here: #3007

[allentong]

Yeah, I think I can close this ticket once that pull request is accepted. Thanks!

[chrisirhc]

See #2156 . We've intentionally removed support for class directives for dropdowns. Is there a reason you need this to be a class directive and can't use this as an attribute directive?

[johnsonw]

Yes, in my case I can change to using an attribute instead of a class. However, my concern is that we shouldn't be including the bootstrap.js file in our projects if we are using angular ui bootstrap correct? The docs read:

Dependencies
This repository contains a set of native AngularJS directives based on Bootstrap's markup and CSS. As a result no dependency on jQuery or Bootstrap's JavaScript is required. The only required dependencies are:

AngularJS (requires AngularJS 1.2.x, tested with 1.2.16)
Bootstrap CSS (tested with version 3.1.1). This version of the library (0.12.0) works only with Bootstrap CSS in version 3.x. 0.8.0 is the last version of this library that supports Bootstrap CSS in version 2.3.x.

[RobJacobs]

@johnsonw You should not be including the bootstrap.js in your project when using the angular-ui-bootstrap directives. The reason the class directive support was removed was because of the conflict that occurs when including both libraries. See my post on stackoverflow that describes why.

[allentong]

I'm a bit confused. Why would someone include Bootstrap.js if they are using this library?

[johnsonw]

@RobJacobs I agree and that was my point; we shouldn't include bootstrap.js if we are using angular-ui-bootstrap. If we don't include bootstrap.js then we shouldn't run into the problem with the class directives. IMO the correct approach to solving the problem would be to remove bootstrap.js from a project and update all instances that depended on it to use angular-ui-bootstrap. Is that not the correct approach?

[wesleycho]

I am closing this as wontfix. The decision was made to not support the class option after the discussion mentioned.