Question

我对onsen警告对话框中的输入文本有疑问

当我点击OK按钮对话框时不隐藏
如何从对话框输入标记获取密码值

＆＃13;

<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>

＆＃13;

Answer 1

您需要将数据添加到全局变量或将其推送到工厂，因为您使用的是Angular。

此外，您还需要将对话框注册到控制器/变量，以便关闭它。教程网站上的演示现在是针对vanilla的，但概念是相同的。

以下是其工作原理：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>

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

1 个答案: