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

【问题标题】：ng-model value is undefined in controllerng-model 值在控制器中未定义
【发布时间】：2016-03-15 06:30:12
【问题描述】：

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

ng-model 位于 ion-content 和 label 下，这就是我的假设导致范围继承问题的原因。此外，视图 {{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 但这也不起作用。有人可以帮我弄清楚这里出了什么问题吗？

【问题讨论】：

我敢打赌正在创建一个孤立的范围。
不是答案，但为什么首先要login(user.email,user.password)？无论如何，您都可以在login() 中访问$scope.user ...
@davidkonrad 老实说，我不确定我是否见过很多使用和未使用该方法的代码示例。我实际上不知道这样做的标准方法。
@ChrisHermut 我相信它也是如此；但是，使用user.email 而不是email 应该可以解决我所读到的问题。

标签： javascript angularjs ionic-framework ionic

【解决方案1】：

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

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

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

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

分叉的 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

【讨论】：

【解决方案2】：

需要更改。

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

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

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

【讨论】：

【解决方案3】：

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

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

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

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

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

希望能有所帮助！

【讨论】：

【解决方案4】：

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

详情请参阅input[email] 上的the docs。

【讨论】：

这个解决方案解决了我的问题。在电子邮件有效之前，电子邮件类型不会发生数据绑定。当然，我只是输入随机字符串来测试它从来没有用过！由于复制和过去的草率，我的密码输入也设置为键入电子邮件；我也不得不改变这一点。现在每个人都按预期工作，谢谢。