Bootstrap responsive navbar broken with angular-1.0.3

[Davis Ford]

I opened an issue on angular here: https://github.com/angular/angular.js/issues/1674

This mainly relates to the interaction between angular, jquery and twitter bootstrap.  Everything was working fine, then I upgraded to 1.0.3 and it broke some navbar functionality in twitter bootstrap.  

If the libraries are loaded in this order:

1> jquery-1.9.2.js

2> angular-1.0.2.js

3> bootstrap-2.2.2js

No problem.   If I drop in angular-1.0.3.js

1> jquery-1.9.2.js

2> angular-1.0.3.js

3> bootstrap-2.2.2.js

Twitter Bootstrap responsive navbar no longer works

If I re-order them as follows:

1> angular-1.0.3.js

2> jquery-1.9.2.js

3> bootstrap-2.2.2js

It works again.  

Unfortunately, I'm also using angular-ui, and if I load angular before jquery it causes all kinds of failures for me in angular-ui

This seems to imply that angular + jquery have side effects - someone is stomping on someone else

[Nils Kilden-Pedersen]

I thought the latest release of jquery was 1.8.3. Where do you download 1.9.2?

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en-US.
 
 

[Davis Ford]

Typo: you're right.  Check jQuery version in jsfiddles, it is 1.8.3 - got #s confused with jQuery-UI

--

http://daisyworks.com

[uglo...@gmail.com]

I had the same problem with jQuery 1.7.2 and 1.8.3 plus AngularJS plus Bootstrap. Fixed with a custom directive on <a class="btn btn-navbar" responsive-menu=".nav-collapse" target="_self">

/**

 * This directive is required due to a conflict between jQuery and AngularJS

 * 

 */

app.directive('responsiveMenu', function factory() {

return {

link: function(scope, element, attributes) {

var jQueryClassSelectorName = attributes.responsiveMenu;

element.bind("click", function(event) {

// Links to the Bootstrap Collapse JS behaviour

$(jQueryClassSelectorName).collapse("toggle");

});

}

};

});

[Pawel Kozlowski]

Yes, there was a regression in 1.0.3, was already fixed (reverted) in
this commit:
https://github.com/angular/angular.js/commit/14948cf5d97fbe0be6fc7f884af65fd73c50e572

This fix is going to make it into the next release, for now you can
monkey-patch AngularJS (it is a single line of code).

Cheers,
Pawel

> --
> You received this message because you are subscribed to the Google Groups
> "AngularJS" group.
> To post to this group, send email to ang...@googlegroups.com.
> To unsubscribe from this group, send email to
> angular+u...@googlegroups.com.
> Visit this group at http://groups.google.com/group/angular?hl=en-US.
>
>



--

Question? Send a fiddle
(http://jsfiddle.net/pkozlowski_opensource/Q2NpJ/) or a plunk
(http://plnkr.co/)
Need help with jsFiddle? Check this:
http://pkozlowskios.wordpress.com/2012/08/12/using-jsfiddle-with-angularjs/

Looking for UI widget library for AngularJS? Here you go:
http://angular-ui.github.com/