从onsen对话框获取输入值

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。