4

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]
    });
Splaktar
  • 5,506
  • 5
  • 43
  • 74
Vedavyas Bhat
  • 2,068
  • 1
  • 21
  • 31
  • 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

1 Answers1

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.