AngularJS：ng-model在checkDuplication方法无法获取输入值的解决咨询

我之前也踩过一模一样的坑！这基本是AngularJS的作用域原型继承特性在搞鬼，咱们一步步来搞定它：

问题根源 #

你直接用了ng-model="usrEmail"这种原始类型（字符串）绑定，要是输入框被ng-if、ng-repeat、ng-switch这类会创建子作用域的指令包裹，子作用域会自动生成一个属于自己的usrEmail副本——这就导致父控制器里的checkDuplication方法拿到的还是父作用域的初始值（空或undefined），而register方法刚好在同一个作用域，所以能正常获取输入值。

最优解决方案：用对象包裹模型 #

AngularJS里绑定对象的属性可以避开原型继承的坑，具体操作如下：

1. 修改HTML中的ng-model #

把直接绑定原始类型改成绑定对象的属性：

<input type="email" class="form-control" name="usrEmail" ng-model="user.usrEmail" ng-required="true" ng-keyup="checkDuplication()">

2. 在控制器中初始化对象 #

在你的signup.js控制器里先初始化user对象，避免出现undefined的问题：

// 替换成你实际的模块名
angular.module('yourSignupApp').controller('SignupController', function($scope) {
    // 先初始化user对象
    $scope.user = {
        usrEmail: ''
    };

    $scope.checkDuplication = function() {
        // 现在就能正常拿到输入框的实时值了！
        console.log($scope.user.usrEmail);
        // 在这里编写你的邮箱重复校验逻辑
    };

    $scope.register = function() {
        // 这个方法也能正常获取值，无需修改原有逻辑
        console.log($scope.user.usrEmail);
        // 你的注册逻辑代码
    };
});

为什么这样管用？ #

当你绑定对象的属性时，子作用域会沿着原型链找到父作用域的user对象，不会创建新的副本——不管是子作用域还是父作用域的方法，访问的都是同一个user.usrEmail值，自然就能拿到输入框的实时内容了。

额外排查点 #

如果上面的方法还没解决，你可以检查这两点：

• 确认checkDuplication方法和register方法是不是定义在同一个控制器作用域里，有没有不小心把checkDuplication写到了其他控制器或指令中；
• 检查输入框所在的DOM结构，有没有被ng-if等创建子作用域的指令包裹，这是最常见的触发场景。

内容的提问来源于stack exchange，提问作者zzangs33