Bootstrap Modal example in pure AngularJS

[Justin]

I've seen several jsfiddles to wrap a directive around various bootstrap javascript components. I decided to try and implement the Modal without the need for jQuery or Bootstrap.js. The end result is nearly identical to Bootstraps modal (without transitions since they aren't implemented in Angular yet). Here's the jsfiddle:

http://jsfiddle.net/subliminal/qhhMN/

There are probably a few minor modifications I could make, but bottom line, this is probably the best way to implement bootstrap. If there is any interest in taking this further, I'd be happy to assist in bringing all of the Bootstrap.js components to pure Angular. Angular + Bootstrap + Bootstrap-Responsive = One design to rule them all.

[ProLoser]

This is how i do it: http://jsfiddle.net/ProLoser/qhhMN/3/

I've been doing it that way for a while. The SASS is a little broken but that's cuz I essentially copy-pasted my code for review purposes.

To render the modal, just do scope.modal.show = true.

I use CSS3 transitions for everything.

[Justin]

Hmmm, I never event considered inject the modal into the rootScope. I had it in my mind to do this from a directive from the start, and frankly, it's probably not the best method for it (I'm still pretty new to angular). Unless I'm mistaken, one issue that may crop up with your example is if you need more than a modal per page, since your injecting your modal into the root scope.

A lot of the "extra" code in my method stems from some of the options bootstrap provides, and since my goal was a drop-in replacement I had to implement them (static backdrop, no backdrop, esc exits, etc). The only reason I didn't go for CSS transitions is because Internet Explorer doesn't support them... well that and I'm hoping Angular eventually implements a transition library. But frankly, that's eye candy, so moot at this point.

[Andy Joslin]

This is really cool.  I may be interested in bringing a couple more things in too.

[Andy Joslin]

I re-made the directive.  It requires jQuery now, and uses custom events to make everything work a lot more cleanly.

http://jsfiddle.net/uBPyE/

I'll have a github repo made soon and will be making more bootstrap stuff.

[Justin]

Your code readability is about 8000 times better than mine lol.

The one major issue with my original example: callback scope is completely broken. Since I store my modals at the top of my document, when you click a button within the dialog, it calls it at the root scope. I think the easiest way to fix this is to have a call back on the buttons (other than ng-click) that the openModal directive looks for. Then you can bind whatever callback to the local scope:

// HTML

<button class="btn" modal-click="blah()">

// Javascript

jQuery.bind('click', scope[modalClick]());

I like the idea of a repo, and frankly, using jQuery make more sense than jQlite, so I would be happy to contribute.

[Andy Joslin]

I think a service may actually be the best way for the modal.  Have the modal declared with a directive, then people can put 'ng-click="scopeModalFn()"' or 'ng-submit="scopeModalFn()'.  Then in the scope the user can just inject a service and call modalService.openModal('modal-id').  It's really the most angular-ish way to do it, and can avoid throwing in messy custom jQuery bindings.

I'm also working on a bootstrap tabs directive, but having trouble with the scope of the tab right now, and something not being evaluted right. Here it is so far:

http://jsfiddle.net/ADukg/20/. 

There are comments where the problems are, and I'll explain:

I want it to make it so when you select a tab and press update on the tab item, it will call update in the MainCtrl scope.  But it calls it in the controller scope instead.

Also, it's not evaluating item-select correctly.  It keeps as a string even though I give it 'evaluate' in the scope.

[Andy Joslin]

Alright Justin, I made a repo.  Let's get these done :-)

[Andy Joslin]

Forgot to post the link: https://github.com/ajoslin/angular-boostrap-ui

[Justin]

Sorry I haven't helped much on this. It's finals week, so I will be starting work on this Monday.

[Andy Joslin]

Updated the modal to use a service to open itself.  It also has lots of options now, including slide-in/out and fade-in/out working now.

You can define options for escape exit / hasBackdrop / show or hide effect in the directive declaration, or each time you show/hide it.  

Demo: http://ajoslin.github.com/angular-bootstrap-ui

Code: http://github.com/ajoslin/angular-bootstrap-ui

[Bretto]

Awesome :)

[Justin]

Here's a jsfiddle for partially completed tooltip:

http://jsfiddle.net/subliminal/HgtXy/

I haven't quite implemented the selector or delay options (although, both should be very easy).

Also, Bootstrap's method for making this work is to add the whole template and remove it each time. This seems counter-intuitive to me, so instead I use an angularjs template and have the tooltip fadein or fadeout.

On Thursday, May 3, 2012 12:51:44 PM UTC-7, Justin wrote:

[Justin]

And a simple implementation of the dropdown:

http://jsfiddle.net/subliminal/n5weV/

The only weakness here is that you can't launch the dropdown from another link (at least in it's current state). But I can't think of a good use case for that anyway.

On Thursday, May 3, 2012 12:51:44 PM UTC-7, Justin wrote:

[Andy Joslin]

Looks great Justin :-)

I think Bootstrap adds and removes the tooltips each time for performance - it makes there be a lot less in the DOM all the time.  It would probably not create that big a performance increase, though.

Could you add more comments to your tooltip code?  I'm a little confused on what some of the stuff does lol.

And as for dropdowns - you may as well make it a jQuery event, just incase someone wants to open the dropdown from elsewhere (then they could just jQuery('#dropdown').trigger('dropdownOpen')).  <3 jQuery events

Anyway, I'll probably work on the bootstrap accordion thing next.

When you're ready, send a pull request to the bootstrap-ui demo.  I'll add a way to compile all the bootstrap ui elements into one file.

[Justin]

Added more comments. I'm assuming the inside variable is what's confusing. Frankly, I'm not sure what the purpose is as its not documented but basically you can change positions to "in top" or "in left" and supposedly the tooltip appears IN the div. The use case for this seems non-existant (why would you want a tooltip to cover the hover div???), which may be why it's not documented.

I added all the comments though to explain that.

The second issue is the selector. I haven't implemented it yet, but I'm guessing a jQuery event is the best way. I'll try and stop being lazy and and fork it and PR on github tonight lol.

[J Castillo]

This is awesome Justin. Now, how would you extend this directive so you can pass arg to it? For example, closeBtn : false, escKey : false, etc etc. In I will like to use Angular exclusively without resourcing on jQuery or Bootstrap methods, so I love what you've done here.

[Vern Jensen]

Nice example. Anyone here know how to add mapping of the Return key on the keyboard to the default button? (The blue one.)

On Thursday, May 3, 2012 12:51:44 PM UTC-7, Justin wrote: