What's the proper way of showing a dialog based on a template in Onsen UI?

I have a one page Angular app with Onsen UI 1.3.6.

I am trying to show a dialog but I keep getting a 404 Not Found error.

My Javascript is:

ons.createDialog('iconselector.html').then(function(dlg) {
  dlg.show();
});

And my HTML is:

<ons-template id="iconselector.html" cancelable>
  <ons-dialog>
    <p>Hello world1</p>
  </ons-dialog>
</ons-template>

I get an error stating:

GET http://localhost/yourdomain/templates/iconselector.html 404 (Not Found) startSymbol @ loader.js:1433sendReq @ loader.js:1432$get.serverRequest @ loader.js:1432processQueue @ loader.js:1433(anonymous function) @ loader.js:1433$get.Scope.$eval @ loader.js:1435$get.Scope.$digest @ loader.js:1435(anonymous function) @ loader.js:1435completeOutstandingRequest @ loader.js:1430(anonymous function) @ loader.js:1430

But if I try to show any templates as normal page using the the Tab bar's loadPage('somepage.html') method, the templates work as expected.

Probably you are trying to create the dialog before iconselector.html page has been created, that's why it cannot find the page. To fix the ons.ready() function, which executes the code after all the DOM has been initialized. Here is an example:

ons.ready(function() {   
  ons.createDialog('iconselector.html').then(function(dialog) {
    dialog.show();
  });
});

There are also two mistakes in your HTML:

  • cancelable is an attribute of ons-dialog and not ons-template
  • var="dlg" is missing in ons-dialog element

Here is the fixed code:

<ons-template id="iconselector.html">
  <ons-dialog var="dlg" cancelable>
    <p>Hello world1</p>
  </ons-dialog>        
</ons-template>

Hope it helps!