How to add custom modal window in angular-app in a good way?

[Jakub Kuchar]

Hi all,

i using angular-app as my bootstrap, so far i am discovering how the modals window work. I am struggling about how to add custom modal window something as login form.

1. Does my modal window need to be new directive as loginForm directive is?
https://github.com/angular-app/angular-app/blob/master/client/src/app/login/login.js

yes i am able to add

<div ui-modal class="fade" ng-model="modalDestination" id="destinationModal">..

anywhere to my views, so far so good, but somehow it doesnt close on Esc for example
it needs to swing with the 2.

2. What does directive modal really do?
https://github.com/angular-app/angular-app/blob/master/client/src/common/directives/modal.js

understanding that is somehow listening for Esc event on the modal window

Any hints will be very helpful.

[Carl Youngblood]

There is also a modal implementation in angular-strap that you might want to take a look at.

--
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.
 
 

[Pawel Kozlowski]

Hi!

The modal directive for the angular-app was taken from the angular-ui/bootstrap:

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

The mentioned repo has 2 different modal implementations:

1) Modal directive - if you want to embed modal content in your partial

2) Dialog service - if you want to trigger modal from a controller and have modal content in an external template - this is often more convenient. 

The mentioned page (http://angular-ui.github.com/bootstrap/) has demo of all the directives and you can open each directive in a separate plunker to see how it works in isolation. 

Angular-strap has also a modal directive but my understanding is that strap's version has dependency on bootstrap's JavaScript (so you need to include it) while the version in the angular-ui/bootstrap is a native AngularJS implementation and doesn't require any external dependencies.

In an essence a modal directive is a really simple one, it the essence it toggles CSS classes based on a model value. On top of this it adds a special element to the body to support backdrop and register key-press handlers (ESC):

https://github.com/angular-ui/bootstrap/blob/master/src/modal/modal.js

Not sure if I'm answering your question fully, if not just prepare a plunk (you can start with one from the demo site), try to experiment and post something here if things don't work as expected.

Cheers,

Pawel

On Mon, Jan 21, 2013 at 8:21 AM, Jakub Kuchar <jakubk...@gmail.com> wrote:

--
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/

[Jakub Kuchar]

Dear Pawel,

yes i see http://angular-ui.github.com/bootstrap/ is a new thing since i last visit http://angular-ui.github.com/. I am looking to those things first time, let me ask the first thing.

What for is angular-ui-bootstrap ? I do have angular-ui in my project. Do I need extra add angular-ui-bootstrap in order to do the magic with modals? There is some magic in angular-ui already..



Dne pondělí, 21. ledna 2013 8:21:59 UTC+1 Jakub Kuchar napsal(a):

[Pawel Kozlowski]

Hi!

On Mon, Jan 21, 2013 at 11:32 AM, Jakub Kuchar <jakubk...@gmail.com> wrote:

What for is angular-ui-bootstrap ?

So, this is a new sub-project under the angular-ui umbrella. The goal here is to provide native AngularJS directives using bootstrap's markup and CSS. Check project philosophy here: https://github.com/angular-ui/bootstrap#native-lightweight-directives

 

I do have angular-ui in my project. Do I need extra add angular-ui-bootstrap in order to do the magic with modals? There is some magic in angular-ui already..

So, yes, angular-ui has a modal directive but we will be removing it from the angular-ui repo and will only keep the one in the bootstrap repo. In fact the bootstrap repo has the $dialog service that allows you to open modals in a more flexible way (IMO). So I would suggesting looking into the $dialog service from http://angular-ui.github.com/bootstrap/

As far as installation goes there is just _one_ file to include: no third-party JavaScript, no jQuery etc. Details here: 

https://github.com/angular-ui/bootstrap/tree/gh-pages#installation

Hope this answers your question.

Cheers,

Pawel

[Jakub Kuchar]

Dear Pawel,

yes question was very helpful. Thank you for it.

Really not sure if I am getting all things around, but
as far as i do have angular-ui OR angular-ui-bootstrap in forked angular-app i dont need this anymore:

https://github.com/angular-app/angular-app/blob/master/client/src/common/directives/modal.js

Is working still in the same way, with or without that..

I added awesome angular-ui-bootstrap and now if i am playing with $dialog in same way as here
http://angular-ui.github.com/bootstrap/

I need to click 2x on close button to made dialog close. I thought is caused by angular-ui and angular-ui-boostrap together. But actually i have tried removing them and including them one by one. I was also checking html code in firebug how about the backdrop divs,styles,classes etc..and actually if open firebug when modal open then i can click only once to make the dialog close...any idea?

Dne pondělí, 21. ledna 2013 8:21:59 UTC+1 Jakub Kuchar napsal(a):

Hi all,

[Jakub Kuchar]

Dear Pawel,

no more worries needed, was probably my fault i had template as follows and button should not be clicked(but for my developing purposes i temporary removed the validation on <button ng-disabled>

once the form is valid, one click on close button is enough.

<h2 ng-show="note.id">Detail of {{note.id}}</h2>

<form name="noteForm">
 
  <div class="control-group" ng-class="{error: noteForm.description.$invalid}">
    <label>Title</label>
    <input type="text" name="title" ng-model="note.title" required>
    <span ng-show="noteForm.description.$error.required" class="help-inline">Required</span>
  </div>
 
  <button ng-click="openDialog()" ng-disabled=""
    class="btn btn-primary" ng-show="!note.id">Send</button>

</form>

Dne pondělí, 21. ledna 2013 8:21:59 UTC+1 Jakub Kuchar napsal(a):

Hi all,