Angular material md-dialog load delay

Question

I have a button on click of which an md-dialog pops up. This dialog contains some rather heavy html and javascript and the first time the button is clicked, it takes about half a second to show the dialog (I'm guessing because the DOM is being created, since it doesn't happen again). Is there any way for me to avoid this lag?

UPDATE: I've narrowed down the problem to needing to pre-compile the template. How do I attach the compiled template to the dialog? Here's my dialog:

$mdDialog.show({
    escapeToClose: true,
    parent: parentEl,
    targetEvent: $event,
    templateUrl: "someurl", //This gets a big html file
    locals: {
        items: $scope.items
    },
    controller: ["$scope", "$mdDialog", DialogController]
    });

Did you solve this problem? If I introduce a fake delay of say 2 seconds before returning the template-HTML, and click multiple times on a button which opens the mddialog, the dialog becomes unresponsive. — Jeppe, Aug 20 '19 at 13:12

Just-a-random-guy · Answer 1 · 2015-07-23T09:18:12.897

0

You could use $compile to pre-compile things. However, a better answer can be given if you add your problematic sourcecode to your question.

UPDATE:

After seeing your code snippet it seems wiser to pre-fill your templateCache, instead of what I mentioned above. You could use $templateCache.put for this.

$templateCache.put('mytemplate.html', '<b>My</b> template');

Preferably you add this during your build process; using Grunt or Gulp there are very convenient plugins available.

edited Jul 23 '15 at 09:18

answered Jul 21 '15 at 10:27

Just-a-random-guy

152
8

1

How do I attach the compiled template to mdDialog? – Vedavyas Bhat Jul 22 '15 at 08:02
Please add your problematic sourcecode, so we can give a better answer :) – Just-a-random-guy Jul 22 '15 at 09:13
There's no problematic source code as such; it's just a large file that's causing the slowdown. It's a typical mdDialog setting, but I've updated the question for your reference. – Vedavyas Bhat Jul 22 '15 at 09:55
Your sourcecode clears things up in how you call the dialog. Is the templateUrl loaded when a user clicks? Or is it already in your templateCache? – Just-a-random-guy Jul 22 '15 at 12:02
Yes, it is loaded when the user clicks. It is slow only the first time. How can i pre-cache the template? – Vedavyas Bhat Jul 23 '15 at 08:20

Angular material md-dialog load delay

1 Answers1