Id taken as file path for the template passed into ngDialog.open()

Question

I am using ngDialog.open() to open a dialog. I want to pass in the template id to the function like this:

ngDialog.open({template: 'templateid'});

However, from the Network history, I find it is trying to fetch the templateid as a file on server.

I feel the ngDialog.open() function's interface design is a little confusing: The value of template options parameter can be either inline immediate HTML, or the file path of an HTML file on server, or the id of a <script> element. How should I distinguish them?

Thanks!

Answer 1

There are 2 options, not 3: either the filename for the template, or the template as a string. To provide the template as a string you set plain: true in the options to open(), so otherwise it will be interpreted as a filename.

The third option -- selecting the template by id -- is actually using a filename that is in Angular's $templateCache. If the name you provide is not in $templateCache for some reason, then it will be requested from the server.

One way to add a template to $templateCache is to use a script tag like this (example from Angular docs):

<script type="text/ng-template" id="templateId.html">
  <p>This is the content of the template</p>
</script>

The main caveat here is that this must be somewhere inside the element that you have ng-app on.

The $templateCache docs also note that you can add a template in code by injecting $templateCache and calling $templateCache.put() and get one by calling $templateCache.get() which could be useful in debugging your situation.