Toggle button is not working with AngularJS and Angular ui Bootsrap

All we need is an easy explanation of the problem, so here it is.

The toggle button appears but it is not working. I’ve got a same code now in online as well and it is not working but in Plunker it is working.

Plunker – toggle button is working

Same code online – button is not working

And the code is:

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>

                <div class="nalogo-wrapper">
                    <img class="img-responsive" src="https://placehold.it/50x50&text=Logo" />
                </div>
            </div>
            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li><a href="#/view1" rel="nofollow noreferrer noopener"><span class="glyphicon glyphicon-home"></span> Etusivu</a></li>
                    <li><a href="#/view2" rel="nofollow noreferrer noopener">Palvelut</a></li>
                    <li><a href="#/view3" rel="nofollow noreferrer noopener">Yhteistiedot</a></li>
                </ul>
            </div><!--/.nav-collapse -->
        </div>
    </div>
    <div id="main">
        <div ng-view>
        </div>
    </div> 

Thanks for help!
Sami

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

I just copied this out of a working project where I used angular-ui bootstrap:

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle btn navbar-btn" ng-init="navCollapsed = true"
                    ng-click="navCollapsed = !navCollapsed">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/#" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener">Bake-Off</a>
        </div>
        <div collapse="navCollapsed" class="navbar-collapse collapse navbar-responsive-collapse">
            <ul class="nav navbar-nav">
                <li><a href="#" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" >Link 1</a></li>
                <li><a href="#" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" >Link 2</a></li>
                <li></li>
            </ul>
            <div class="container navbar-form navbar-right">

            </div>
        </div>
        <!--/.navbar-collapse -->
    </div>
</div>

Method 2

You must make some changes to your navbar to accomodate the collapse directive of Angular UI-Bootstrap. I wondered about this myself not so long ago, the question was already asked and answered over here:

Responsive dropdown navbar with angular-ui bootstrap (done in the correct angular kind of way)

Method 3

Adding an alternative solution to the answer of Josh C, just changing the collapse to uib-collapse, based on the latest documentation

https://angular-ui.github.io/bootstrap/#!#collapse

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle btn navbar-btn" ng-init="navCollapsed = true"
                    ng-click="navCollapsed = !navCollapsed">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/#" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener">Bake-Off</a>
        </div>
        <div uib-collapse="navCollapsed" class="navbar-collapse collapse navbar-responsive-collapse">
            <ul class="nav navbar-nav">
                <li><a href="#" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" >Link 1</a></li>
                <li><a href="#" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" >Link 2</a></li>
                <li></li>
            </ul>
            <div class="container navbar-form navbar-right">

            </div>
        </div>
        <!--/.navbar-collapse -->
    </div>
</div>

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply