CODEWITHSUNDEEP
javascripttwitter-bootstrapangularjs
prototype
prototype

Reputation: 7970

Using Angular with Twitter Bootstrap templates

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>

Upvotes: 0

Views: 362

Answers (1)

stmcallister
stmcallister

Reputation: 1719

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/

Upvotes: 2

Related Questions