从温泉对话框中获取输入值

Question

我一直在关注 http://codepen.io/onsen/pen/zxxaGa 中的示例。但是，我不知道如何在单击按钮后从对话框中获取输入文本（用户名、电子邮件）。

<ons-page>
<ons-toolbar>
 <div class="center">Dialog</div>
</ons-toolbar>
<ons-list ng-controller="DialogController">
<ons-list-item ng-click="show('login.html')" modifier="tappable">
 Login form
</ons-list-item>
</ons-list>
</ons-page>

<ons-template id="login.html">
<ons-dialog var="dialog" cancelable>
  <ons-toolbar inline>
    <div class="center">
      Login
    </div>
  </ons-toolbar>    
  <p>
    <input placeholder="Username" id="username" class="text-input">
  </p>    
  <p>
    <input type="password" placeholder="Password" id="username" class="text-input">
  </p>
  <p>
    <ons-button modifier="large" ng-click="dialog.hide()">Sign in</ons-button>
  </p>
 </ons-dialog> 
</ons-template>

Answer 1

这实际上是一道 AngularJS 题。 login.html 没有控制器，因此创建一个并提供 ng-controller。之后，在输入中使用 ng-model。

<ons-template id="login.html">
  <ons-dialog var="dialog" cancelable ng-controller="MyController">
    ...
    <input id="username" ... ng-model="username">
    ...

用户名将存储在$scope.username里面MyController。

从温泉对话框中获取输入值

Get input value from onsen dialog

onsen-ui