Toggle button is not working with AngularJS and Angular ui Bootsrap

Question

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="http://placehold.it/50x50&text=Logo" />
                </div>
            </div>
            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li><a href="#/view1"><span class="glyphicon glyphicon-home"></span> Etusivu</a></li>
                    <li><a href="#/view2">Palvelut</a></li>
                    <li><a href="#/view3">Yhteistiedot</a></li>
                </ul>
            </div><!--/.nav-collapse -->
        </div>
    </div>
    <div id="main">
        <div ng-view>
        </div>
    </div>

Thanks for help! Sami

Josh C. · Accepted Answer · 2014-02-04 15:06:09Z

8

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="/#">Bake-Off</a>
        </div>
        <div collapse="navCollapsed" class="navbar-collapse collapse navbar-responsive-collapse">
            <ul class="nav navbar-nav">
                <li><a href="#" >Link 1</a></li>
                <li><a href="#" >Link 2</a></li>
                <li></li>
            </ul>
            <div class="container navbar-form navbar-right">

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

answered Feb 4, 2014 at 15:06

Josh C.

4,4035 gold badges33 silver badges52 bronze badges

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

1 Comment

sports Over a year ago

When I use navbar-fixed-top with angular an bootstrap-ui the content that is below the navbar starts at the top of the screen and not below the navbar. Any comments about that?

Community · Accepted Answer · 2017-05-23 11:47:10Z

1

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)

edited May 23, 2017 at 11:47

CommunityBot

11 silver badge

answered Feb 4, 2014 at 9:40

iH8

28.8k4 gold badges72 silver badges83 bronze badges

Comments

Hetdev · Accepted Answer · 2017-05-04 19:13:57Z

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="/#">Bake-Off</a>
        </div>
        <div uib-collapse="navCollapsed" class="navbar-collapse collapse navbar-responsive-collapse">
            <ul class="nav navbar-nav">
                <li><a href="#" >Link 1</a></li>
                <li><a href="#" >Link 2</a></li>
                <li></li>
            </ul>
            <div class="container navbar-form navbar-right">

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

Collectives™ on Stack Overflow

Toggle button is not working with AngularJS and Angular ui Bootsrap

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related