Bootstrap data-toggle reloads page when paired with angular

Question

This is similar with issue 19930383

<div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
            <span class="sr-only" style="background-color:white">Toggle navigation</span>
            <span class="icon-bar" style="background-color:white"></span>
            <span class="icon-bar" style="background-color:white"></span>
            <span class="icon-bar" style="background-color:white"></span>
        </button>
        <div id="header-logo" ng-click="go('/start', 'slideUp')">
            <img src="image.png" alt="" class="">
            <div id="bluebar"></div>
        </div>

</div>

The issue is that I can only expand the collapsed navbar, can't shrink it back.

I realized that whenever I click the navbar-toggle button, the page reloads itself.

I already tried to remove the 'data-toggle' attribute, which makes the page stop reloading (and the bar stops expanding), so that must be what's causing this behavior.

edit Thanks for the help, I solved it with angular-ui, as recomended by charlieftl and l34p3r

Answer 1

Adding more detail to chartlietfl's comment above, Bootstrap.js and Angular are somewhat at odds with one another in this case. Angular invites the use of directives to handle interface components with JavaScript. If you wanted to use Bootstrap with Angular, you'd have the easiest time using Angular-ui Bootstrap, which gives you all of the Bootstrap.js functionality wrapped in Angular directives. Using ui-bootstrap will definitely cut down on the code you need to use to apply Bootstrap's JS functionality separately.

Here's another question that benefitted from converting to ui-bootstrap from the standard Bootstrap functionality when using a button trigger for toggling a collapsible element. The difference between the HTML in the questions and the answer can be used as a model for comparing how your code could look before and after ui-bootstrap integration. Specifically, look at how they swapped out data-toggle in favor of using ngClick to toggle collapsed state.

Hope that helps.