fix(modal): compile modal before inserting into DOM

[onumossn]

I think this fixes #5183

[wesleycho]

This looks like a good fix to me - thoughts @Foxandxss and/or @icfantv ?

[Foxandxss]

If it fixes it, I am all in, but we need to be sure (AKA plunker).

[icfantv]

Looks like there's 13 broken tests in the build. Need to see if the tests are no longer valid or they need to be updated. @onumossn, if you would like this merged, your work is not yet complete.

[onumossn]

The original commit, actually, only fixed issue 1 of the two listed on #5183, so I made additional updates to fix the 2nd issue.

@Foxandxss The cases can be tested from the demos, so is a plunker necessary?

@icfantv Sorry about that. I had used the wrong command to test initially. I updated the tests. Previously an extra $animate.flush was used because the $compile would use more $animates after the first $animate.flush in the open function, but since the $compile no longer waits for the first $animate, its no longer necessary.

[Foxandxss]

A test to prove that your PR fixes the issue.

[icfantv]

@onumossn, what @Foxandxss means is take the proper file from the dist folder and create a plunker using it. Easiest thing to do would be to use the modal plunker demo (from the docs page) remove the script include for UIBS, and add yours locally instead.

@Foxandxss, @wesleycho, IIRC we added those flush() calls when angular-animate changed between 1.4.4 and 1.4.5, right?

[wesleycho]

The flush() has to do with ngAnimate.

What you could do is test for the newly created element's presence in the element being appended to (body by default) and then flush.

[onumossn]

flush is being run in the open helper. However, flush needed to be run twice before because after the first flush the uib-modal-window directive gets compiled which adds more animation to the buffer which needs to be flushed again. In this version, the compile occurs before the first flush so all the animations are in the buffer when the first flush occurs in the open helper. I may not have been very clear in my last comment.

[onumossn]

before plunker:
https://embed.plnkr.co/YbWBhcwoFECDFnpP4rnW/

after plunker:
https://embed.plnkr.co/pCBkbYY1BIkBeQ8lUR0q/

[wesleycho]

Why is this change made? This seems unnecessary

[onumossn]

ngClass was going through the animation processes of all the before and after classes which was causing the size when picking small or large to be regular size when initially rendered and the jump to the correct size.

[wesleycho]

Ugh, that's a negative of it being tied to $animate...but I guess it can't be avoided then.

[wesleycho]

This needs a test still that the element is compiled before the $animate.enter completes.

[onumossn]

Added tests

[wesleycho]

You could just do topModal.value.modalDomEl.find('#test') here I believe - we have jQuery in the testing situation.

[wesleycho]

Once the query selectors are changed to just use jQuery, can you squash your commits into one?

This LGTM otherwise.

[onumossn]

Update the tests to use jQuery. Sorry for the delay.

[wesleycho]

LGTM - thanks for this!