$modal: Instance promise opened() seems to resolve before dialog's DOM elements are available

[pixelnix]

Here's a plunk:
http://plnkr.co/edit/EX34WiUsPheGMUfZEjCm?p=preview

Run that with the console open and you should see that when the dialog first opens, the element with id "target_container" doesn't yet exist in the DOM. If you wait a second and then click the link in the dialog, executing the code that checks for its existence, you should see that it finally exists.

I interpreted the semantics of the opened() promise as resolving after the dialog contents are "ready". But that doesn't seem to be the case? Is it a bug, or is that just not the semantics of opened()? If the latter, there doesn't seem to be any way to wait until the dialog is completely loaded and all its elements attached to the DOM.

[pkozlowski-opensource]

@pixelnix you are correct, the opened promise is resolved when the template of the modal is fetched and all data are ready. It will fire before animations are run, though. This promise is not meant to mean "modal's DOM is ready" as we can't know this - for example modal could use directives that fetch their templates asynchronously etc. This promise was introduced so people could hide waiting indicators that they could be showing before modal gets opened.

Not sure what you are trying to do in practice but it smells like DOM manipulation from controllers and we definitively don't want to make it any easier as this is bad practice.

If you provide your real use-case I can (maybe) suggest a solution.

[pixelnix]

Yeah, this is about DOM manipulation, of the type that I'm not going to get away from easily or immediately, I'm afraid. In this case I've got a third-part library, specifically a video player, to initialize in the modal controller by passing it the id of an element in the modal. The plunk I posted is a pared-down version of our original attempts which contained code more or less like this in the modal controller, instead of just logging the existence of the named container:
$scope.init = function() {
videoPlayer("video_container").initialize({......});
...
}
$modalInstance.opened.then($scope.init);

I understand what you're saying about the nature of opened() versus my expectation, so I'll close this issue. I don't quite grok the idea that there's no way to know that the modal's DOM is ready - even when modal fetches its template asynchronously, will the template promise not resolve on that event? But that's neither here nor there, I suppose.

[pixelnix]

I'll note that we did find a workaround, it seems - adding ngInit to the modal's template markup.
<div ng-init="init()">
This is definitely not the supported use of ng-init, but it does the job. Example here:
http://plnkr.co/edit/6hFJnGr4QwmzaXIVDMZg?p=preview

[pkozlowski-opensource]

@pixelnix the "right" approach in cases like yours is to write a (very small) directive named modalWindow. In angular all directives with the same name will execute so your directive would execute at the same time as the modal's window one (when the DOM is actually inserted into the DOM). The bonus point is that you are in the directive with the direct access to DOM elements and you don't have to hack with DOM manipulation.

[williamherry]

@pkozlowski-opensource I meet the same issue as yours, can you give more detail how you solve that?

[pixelnix]

Basically we took the dom-altering code that couldn't work on account of it
executing before the modal's dom was prepared, and put it in a directive.
On Oct 31, 2014 8:22 PM, "William Herry" notifications@github.com wrote:

@pkozlowski-opensource https://github.com/pkozlowski-opensource I meet
the same issue as yours, can you give more detail how you solve that?

—
Reply to this email directly or view it on GitHub
#2586 (comment)
.

[williamherry]

@pixelnix sorry, I am really new to angularjs, what you mean by put it in a directive, can you give me some example code? thanks

[pixelnix]

I can't give you better examples than what's already out there on the web,
if you go searching for info on, and examples of, how to create angular
directives.
On Oct 31, 2014 8:58 PM, "William Herry" notifications@github.com wrote:

@pixelnix https://github.com/pixelnix sorry, I am really new to
angularjs, what you mean by put it in a directive, can you give me some
example code? thanks

—
Reply to this email directly or view it on GitHub
#2586 (comment)
.