mdDialog: is there any way to provide already existing content (domNode)?

[vajnorcan]

versions 1.0.6, 1.1.0-rc1

I've been playing around the mdDialog that I'd like to use as a UI for the settings of the application. The content of the settings uses other Angular Material components (buttons, switches, selects), let's say up to 12 components.

It works reasonably well on the non IE browsers, but on IE it takes a really long time to render the template and inject it with all the scope values and to render the inner components. If the template is a simple text it's realtively quick.

I was wondering, is there any way I could provide the mdDialog already rendered content (with display: none; ) and keep the reference to this dialog somewhere (or I could place this content some elsewhere on hide)? Or does the mdDialog always constructs the inner content and destroys it?

Thanks

[topherfangio]

@devversion Can you please take a look at this and see if there is a way to do it right now? If not, can you mark this as Priority 4 and make it a feature request?

[devversion]

@topherfangio This can be easily done, by the interim element API.

$mdDialog.show({
  skipCompile: true,
  element: myDialogNode
});

But this will cause an error within the dialog service, because the dialog service tries to find a <md-dialog> element, but this isn't present, because there is no template processing and compilation anymore.

I've created a PR, which makes the dialog service compatible with the interim skipCompile API and also added a test, which represents this issue.

[ThomasBurleson]

@topherfangio, @devversion - The idea is great... but I do not like this API.

[topherfangio]

@ThomasBurleson Are you worried about the skipCompile API? That already exists and is used by the select and menu components.

[ThomasBurleson]

$mdDialog.show({
  anchor: myDialogNode  // existing element that will be extracted from the DOM, used in md-dialog-content, and then restored after dialog close.

});

• if the element is not found, log a warning
• anchor could be a element reference or a query-selector

[devversion]

@topherfangio Just talked to Thomas about the API.

We found a good way to support element references. We want to add a property, which supports an element reference or a query selector.

$mdDialog.show({
  contentElement: myDialogNode
});

If the contentElement value is an element, which is added to the DOM, then we'll extract it and restore it upon close. (Same for the Query Selector)

If it's just an element, which is virtual present, then we won't restore it, because it has actually no parent. So we will just remove it from the dialog container.

I think that's a very elegant solution and I like it.