ng-model 值在控制器中未定义

Question

我正在尝试制作一个视图，该视图仅通过 ng-model 接收电子邮件和密码，然后通过 ng-click 将其传递给控制器中的登录功能。我似乎无法让它正常工作，过去关于作用域继承和 $parent 的帖子似乎没有为我解决问题。

ng 模型位于 ion-content 和标签下，这就是我的假设导致范围继承问题的原因。此外，视图 {{user.email}} 中发生的数据绑定永远不会更新。

这里是一个 plunker，我试图在其中重现我的问题：http://plnkr.co/edit/JFlO64xi4nG84xqFDYsv?p=info

HTML

<body ng-controller='MyCtrl'>

    <ion-content>
    <div class="list">
      <label class="item item-input">
        <input type="email" placeholder="Enter Email" ng-model="user.email">
      </label>
      <label class="item item-input">
        <input type="email" placeholder="Enter Password" ng-model="user.password">
      </label>
      {{user.email}}
      {{user.password}}
      <button class="button button-block button-positive" ng-click="login(user.email,user.password)">Log in</button>
    </div>
  </ion-content>

  </body>

JavaScript

angular.module('starter', ['ionic'])

.controller('MyCtrl', function($scope) {
  $scope.user = {
    email: '',
    password: ''
  }
  $scope.login = function(email,password) {
    console.log("email is: ",email); // will log undefined
    console.log("password is",password); // will log undefined
  };
})

我试过 $parent.user.email 但这也不起作用。有人可以帮我弄清楚这里出了什么问题吗？

Answer 1

您已设置 type="email"，这将导致进行验证。当一个字段无效时，底层模型将不会更新。将 input 更改为 type="text" 以查看差异。

有关详细信息，请参阅 input[email] 上的 the docs。

Answer 2

在您的 HTML 中，尝试将类型更改为文本并将字段 "name" 添加到您的输入中，例如：

<input name="email" type="text" placeholder="Enter Email" ng-model="user.email">

名称必须与您的对象（模型）属性相同，在您的情况下，您的对象（模型）用户的属性是"email"。所以其他输入应该是这样的：

<input name="password" type="text" placeholder="Enter Password" ng-model="user.password">

这里你的对象（模型）用户的属性是密码，所以名字也是"password"。

希望对您有所帮助！

Answer 3

需要更改。

<input name="email" type="email" placeholder="Enter Email" ng-model="user.email">

<input name="password" type="password" placeholder="Enter Password" ng-model="user.password">

测试时不要忘记输入电子邮件地址。井验证是另一个问题

Answer 4

显然这是一个众所周知的问题 -> https://github.com/driftyco/ionic/issues/555

解决方案：只需将您的 ionic 升级到 1.1.1.

正如@stevuu 指出的那样，您应该/也可以将输入 type 设置为 text - 在输入 email 后，内容将被验证并且 return undefined 如果 user.email 不是有效的电子邮件。

进行这两项更改后，它就起作用了。

分叉 plnkr -> http://plnkr.co/edit/yPiFQkzfNJFDr1gOWFry?p=preview

您还可以利用 type="email" 并在电子邮件无效时显示错误消息：

<input type="email" placeholder="Enter Email" ng-model="user.email">
...
{{ error }}

$scope.login = function(email,password) {
  $scope.error = !email ? 'Email is not valid' : '';
  console.log("email is: ",email); 
  console.log("password is",password); 
};

http://plnkr.co/edit/pOl88KdOno0keQwePyvH?p=preview

ng-model 值在控制器中未定义

ng-model value is undefined in controller

javascript

angularjs

ionic-framework

ionic