2016-05-18 9 views
1

私は温泉UI警告ダイアログGET値は

  1. 私はOKボタン]ダイアログボックスが非表示にしないでクリックすると、温泉の警告ダイアログ上の入力テキストに問題があるダイアログ閉じパスワードを取得する方法
  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>

答えて

1

データをグローバル変数に追加するか、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> 
関連する問題