Using Angular with Twitter Bootstrap templates

Question

Would like to use the Twitter Bootstrap templates within an otherwise Angular app. Replaced Bootstrap's JS with Angular-UI, and all works well.

Except the 'hamburger' button that appears when the page is narrow doesn't work. By contrast, the dropdown that appears when the page is wide does work with Angular. Any suggestion?

http://jsfiddle.net/user645715/EJ3P7/

Specifically it's this button. Is there a directive I should include, or a directive not included in Angular UI?

 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>

stmcallister · Accepted Answer · 2013-10-08 22:52:08Z

2

To get the 'hamburger' button to work you'll still need to include jQuery and the original Bootstrap JS even when using Angular-UI.

<script src="http://codeorigin.jquery.com/jquery-2.0.3.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.1.1/angular.min.js"></script>
<script src="https://rawgithub.com/angular-ui/bootstrap/1c231e4f41fd5030de26c754754a3e4860ad30c7/ui-bootstrap-tpls-0.6.0.min.js">
</script>

http://jsfiddle.net/stmcallister/zwCn4/3/

edited Oct 8, 2013 at 22:52

answered Oct 8, 2013 at 21:21

stmcallister

1,7371 gold badge12 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Stephen Chung Over a year ago

Then what's the point of Angular-UI Bootstrap? I thought the whole point was to avoid having to load jQuery and bootstrap.js.

Collectives™ on Stack Overflow

Using Angular with Twitter Bootstrap templates

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related