Twitter Bootstrap Responsive Navbar broken with 1.0.3 release

[davisford]

Hi, I'm trying to use the Twitter Bootstrap responsive Navbar with AngularJS. When I upgraded from 1.0.2 to 1.0.3 the responsive navbar feature stopped working.

The responsive features work in terms of the viewport changing layout when resized, but under a smaller viewport, you can no longer click on the button to expand the navbar menu.

I created a jsfiddle example here: http://jsfiddle.net/ghtC9/2/ that includes angular-1.0.3.js

The HTML code was cut/paste from the bootstrap example for Responsive Navbar (section found under here):

Here's the same jsfiddle http://jsfiddle.net/ghtC9/5/ that includes angular-1.0.2.js -- note that the menu button now expands when clicked.

I tried loading them in different orders: 1) bootstrap 2) angular vs. 1) angular 2) bootstrap - makes no difference.

There is nothing in the console giving any indication of an error.

[apb2006]

+1

[davisford]

Same problem with angular 1.1.1

[nodokodo]

+1 for 1.0.3, no errors anywhere.

Actually, I've just re-ordered my build and it's working OK

angular, angular-resource, jQuery, bootstrap*

Originally had jQuery & bootstrap first due to this exact issue (collapse not working); haven't tested further as yet.

[davisford]

@nodokodo - i'll be a monkey's uncle -- if you re-order as follows:

1. angular.js
2. jquery.js
3. bootstrap.js

It does fix it!

jsfiddle updated: http://jsfiddle.net/ghtC9/6/

Unfortunately, this causes a host of other issues. I'm also using angular-ui, and it fails horribly if I re-order so jquery loads after angular.

[shahmirn]

I had the same issue in my application until I changed

<a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-responsive-collapse">

to

<a href="#" class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-responsive-collapse">

that is, I added href="#" to the anchor tag.

[nodokodo]

@shahmirn that's the ticket, cheers

[Letsan]

Seems related to the click issue with jQuery when no href is given. That should explain why adding the href="#" fixes the problem.
#1651
#1662

Problem is, when using a dropdown, if each

item has no href defined or is empty, then clicking the item will trigger the ng-click callback but it will not close the dropdown as normal because of the return false in the click handler.

[davispw]

This is caused by c81d817. Quick fix: comment out "return false".

[Letsan]

I'd close this issue is caused by click event not propagating. (#1651)

[amit777]

In case it helps anyone, I change the anchor tag to a button tag, and it works nicely. The problem with add href="#" to the a-tag is that when you click the dropdown button, angular will redirect you to your homepage route.

I've only done a little testing, but it seems to work.

This is the article that I read that helped: http://onehungrymind.com/quick-note-ng-disabled-and-anchor-tags-oh-noes/

[Letsan]

The best fix is to comment out the line which is causing the issue as mentioned by @davispw

Just changing anchor elements to inputs doesn't change the fact that click events aren't propagating thanks to the return false in c81d817