I was wondering if there are any conventions I need to follow if I want to implement twitter bootstrap into my angularJS application or is angular just unobtrusive with twitter bootstrap?
- it's worth noting that the Angular team has Bootstrap as part of it's UI library: angular-ui.github.io/bootstrapgonzofish– gonzofish2014-01-19 06:35:16 +00:00Commented Jan 19, 2014 at 6:35
Add a comment |
1 Answer
You need to wrap bootstrap javascript component individually in a directive to make it work. Below is an example to make modal javascript plugin work with angular.
There is an active community Angular UI bootstrap which does implements bootstrap javascript plugins as Angular directive effectively.
I feel, writing my own directive makes customization easy and no need for heavy javascript library files in your web application.
angular.module(app.name).directive('modaldir', function() { return { restrict: 'A', // The linking function will add behavior to the template link: function(scope, element, attrs) { console.log("inside modal"); element.click(function(e) { e.preventDefault(); var href = element.attr('href'); console.log(href); $(href).modal(); }); } }; }) HTML:
<a data-toggle="modal" href="#myModal" modaldir class="pull-right password-retrieve" >Forgot your password?</a> 1 Comment
pkozlowski.opensource
Actually some statements in this answer are not correct: AngularUI team does not wrap Bootstrap's JavaScripts in directives but rather re-implement those JS components as native AngularJS directives. This is big difference since with the AngularUI approach you don't need to include jQuery nor Bootstrap's JavaScript - you only need Bootstrap's CSS.