ons-dialogのhide()について

###前提・実現したいこと
ons-dialogの仕様について

###発生している問題・エラーメッセージ

dialogを閉じてから再度開くと、hide()が効かなくなる。

###該当のソースコード

html
1<ons-template id="sample.html">
2  <ons-page>
3    <ons-toolbar>
4      <div class="right">
5        <ons-toolbar-button onclick="showdlg1()">
6          <ons-icon icon="ion-plus"></ons-icon>
7        </ons-toolbar-button>
8      </div>
9    </ons-toolbar>
10  </ons-page>
11</ons-template>
12
13<ons-template id="dialog1.html">
14  <ons-dialog id="dialog1" cancelable>
15    <ons-toolbar inline>
16      <label class="center">追加</label>
17      <div class="right">
18        <ons-toolbar-button modifier="quiet" onclick="hidedlg1()">
19          完了
20        </ons-toolbar-button>
21       </div>
22    </ons-toolbar>
23    <div style="text-align: center">
24      <p>
25        <ons-input modifier="underbar" placeholder="hoge"></ons-input>
26      </p>
27      </div>
28    </ons-dialog>
29</ons-template>

JavaScript
1function showdlg1() {
2  ons.createDialog('dialog1.html').then(function(dialog1) {
3    dialog1.show();
4  });
5};
6function hidedlg1() {
7    dialog1.hide();
8};

###試したこと
手詰まりです汗

###補足情報(言語/FW/ツール等のバージョンなど)
Monaca,OnsenUI,jQuery,JavaScript

行動規範の内容に同意します

回答1件

ベストアンサー

http://tutorial.onsen.io/?framework=vanilla&category=reference&module=dialog
OnsenUIチュートリアルにある通り、

function showdlg1() {
  var dialog1 = document.getElementById('dialog1')
  if(dialog1) {
    dialog1.show();
  }
  else {
    ons.createDialog('dialog1.html').then(function(dialog1) {
      dialog1.show();
    });
  }
};

にしてできませんか？

※試したHTML載せておきます

html
1<!doctype html>
2<html lang="en">
3<head>
4    <meta charset="utf-8">
5<!--
6-->
7    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.4.2/css/onsenui.min.css" />
8    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.4.2/css/onsen-css-components.min.css" />
9    <script src="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.4.2/js/onsenui.js"></script>
10    <script src="https://unpkg.com/vue"></script>
11    <script src="https://unpkg.com/vue-onsenui@2.0.2"></script>
12<!--
13    <script src="https://code.jquery.com/jquery-2.2.4.js"></script>
14    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
15-->
16</head>
17<body>
18<ons-navigator id="myNavigator" page="sample.html"></ons-navigator>
19
20<ons-template id="sample.html">
21  <ons-page>
22    <ons-toolbar>
23      <div class="right">
24        <ons-toolbar-button onclick="showdlg1()">
25          <ons-icon icon="ion-plus"></ons-icon>
26        </ons-toolbar-button>
27      </div>
28    </ons-toolbar>
29  </ons-page>
30</ons-template>
31
32<ons-template id="dialog1.html">
33  <ons-dialog id="dialog1" cancelable>
34    <ons-toolbar inline>
35      <label class="center">追加</label>
36      <div class="right">
37        <ons-toolbar-button modifier="quiet" onclick="hidedlg1()">
38          完了
39        </ons-toolbar-button>
40       </div>
41    </ons-toolbar>
42    <div style="text-align: center">
43      <p>
44        <ons-input modifier="underbar" placeholder="hoge"></ons-input>
45      </p>
46      </div>
47    </ons-dialog>
48</ons-template>
49
50<!--
51<div id="app">
52</div>
53-->
54
55</body>
56<script>
57ons.ready(function() {
58});
59function showdlg1() {
60  var dialog1 = document.getElementById('dialog1')
61  if(dialog1) {
62    dialog1.show();
63  }
64  else {
65    ons.createDialog('dialog1.html').then(function(dialog1) {
66      dialog1.show();
67    });
68  }
69};
70function hidedlg1() {
71    dialog1.hide();
72};
73
74</script>
75</html>