Onsen-ui-alert对话框从输入标记中获取值以及如何关闭对话框

Question

我在启动警报对话框上的输入文本有问题

1. 单击"确定"按钮时对话框不隐藏
2. 如何从对话框输入标签中获取密码值

<ons-button modifier="tappable" onclick=" 
ons.createAlertDialog('alert.html').then(function(alertDialog) {
      alertDialog.show();
    });
     "
>Test2</ons-button>
<script type="text/ons-template" id="alert.html">
  <ons-alert-dialog animation="default" cancelable>
    <div class="alert-dialog-title">Warning!</div>
    <div class="alert-dialog-content">
      <input id="password" ng-model="password" class="text-input " type="number" 
    pattern="[0-9]*" inputmode="numeric" placeholder="password" value="" autofocus>
    </div>
    <div class="alert-dialog-footer">
      <button class="alert-dialog-button" onclick="alertDialog.hide()">OK</button>
    </div>
  </ons-alert-dialog>
</script>

Answer 1

您需要将数据添加到全局变量中，或者在使用Angular时将其推送到工厂。

此外，你还需要将你的对话注册到一个控制器/变量中，这样你就可以关闭它。教程网站上的演示现在是针对香草的，但概念是一样的。

以下是其工作原理：http://tutorial.onsen.io/?framework=vanilla&category=引用&module=对话框

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>