データをグローバル変数に追加するか、Angularを使用しているように見えるように工場にプッシュする必要があります。
また、ダイアログをコントローラ/変数に登録して閉じることもできます。チュートリアルサイトのデモは、現在バニラ向けですが、コンセプトは同じです。ここで
が、これがどのように動作するかです:http://tutorial.onsen.io/?framework=vanilla&category=Reference&module=dialog
JS:
var showDialog = function(id) {
document
.getElementById(id)
.show();
};
var hideDialog = function(id) {
document
.getElementById(id)
.hide();
};
var fromTemplate = function() {
var dialog = document.getElementById('dialog-3');
if (dialog) {
dialog.show();
}
else {
ons.createDialog('dialog.html')
.then(function(dialog) {
dialog.show();
});
}
};
マークアップ:
<ons-page>
<ons-toolbar>
<div class="center">Dialogs</div>
</ons-toolbar>
<ons-list>
<ons-list-header>Showing dialogs</ons-list-header>
<ons-list-item tappable onclick="showDialog('dialog-1')">Simple dialog</ons-list-item>
<ons-list-item tappable onclick="showDialog('dialog-2')">Alert dialog</ons-list-item>
<ons-list-item tappable onclick="fromTemplate()">From template</ons-list-item>
<ons-list-header>Notifications</ons-list-header>
<ons-list-item tappable onclick="ons.notification.alert('Hello, world')">Alert</ons-list-item>
<ons-list-item tappable onclick="ons.notification.confirm({message: 'Are you ready?'})">Confirmation</ons-list-item>
<ons-list-item tappable onclick="ons.notification.prompt({message: 'What is your name?'})">Prompt</ons-list-item>
</ons-list>
</ons-page>
<ons-dialog id="dialog-1">
<div style="text-align: center; padding: 10px;">
<p>
This is a dialog.
<p>
<p>
<ons-button onclick="hideDialog('dialog-1')">Close</ons-button>
</p>
</div>
</ons-dialog>
<ons-alert-dialog id="dialog-2">
<div class="alert-dialog-title">Warning!</div>
<div class="alert-dialog-content">
An error has occurred!
</div>
<div class="alert-dialog-footer">
<button class="alert-dialog-button" onclick="hideDialog('dialog-2')">Cancel</button>
<button class="alert-dialog-button" onclick="hideDialog('dialog-2')">OK</button>
</div>
</ons-alert-dialog>
<ons-template id="dialog.html">
<ons-dialog id="dialog-3">
<div style="text-align: center; padding: 10px;">
<p>
This dialog was created from a template.
<p>
<p>
<ons-button onclick="hideDialog('dialog-3')">Close</ons-button>
</p>
</div>
</ons-dialog>
</ons-template>