Angular delay loading md-dialog material
I have a button that when clicked opens an md dialog. This dialog contains some pretty heavy html and javascript and the first time the button is clicked, it takes about half a second to display the dialog (I'm assuming the DOM is being generated since this won't repeat itself). Is there a way to avoid this lag?
UPDATE: I have narrowed down the problem by requiring the template to be compiled first. How do I attach a compiled template to a dialog box? Here's my dialogue:
$mdDialog.show({
escapeToClose: true,
parent: parentEl,
targetEvent: $event,
templateUrl: "someurl", //This gets a big html file
locals: {
items: $scope.items
},
controller: ["$scope", "$mdDialog", DialogController]
});
source to share
You can use compile $ to precompile things. However, a better answer can be asked if you add your problematic source code to your question.
UPDATE:
After looking at the code snippet, it seems more reasonable to prefill your templateCache instead of what I mentioned above. You can use $ templateCache.put for this.
$templateCache.put('mytemplate.html', '<b>My</b> template');
Preferably you add this during the build process; very handy plugins are available with Grunt or Gulp.
source to share