javascript - ng-show 和 ng-change 不必要的延迟

Question

我是 angularjs 和 firebase 的新手。我正在尝试制作一个表单，让用户在其中插入用户名。每次 <input> 发生变化时，我都会检查用户名是否已被占用或是否可用。如果用户名已被占用，我想显示 <p>，表示“用户名已被占用”。

问题是这样的:如果我插入一个已经使用的用户名(例如“Damiano”)，控制台会显示“用户名不正确”，但 <p> 段落与 ng-show 不出现。但是，如果我向用户名添加一个字母(例如“Damianox”)，控制台会显示“用户名正常”，并且出现 <p> 段落!但它一定不会出现，因为用户名“Damianox”是免费的!

好像有一封信延迟了!

这是代码，抱歉英语不好!

这是 fitime.html

<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="txtTitle">Username</label>  
  <div class="col-md-4">
    <input type="text" id="txtUsername" ng-model="user.username" ng-change="verifyuser();"  placeholder="Be imaginative" class="form-control input-md">
    <p ng-show="invalidUsername"> The username is already taken</p>
  </div>
</div>

这是firstime.js

.controller('FirstimeCtrl', ['$scope', '$firebase','$location', 'CommonProp', function($scope, $firebase, $location ,CommonProp) {

    $scope.verifyuser = function(){

                //var invalidName = $scope.invalidUsername;
                var newUsername = $scope.user.username;
                var msg = $scope.invalidMsg;

                var ref = new Firebase("https://instafame.firebaseio.com");
                var q = ref.child("users").orderByChild("username").equalTo(newUsername);     

                    q.once("value", function(snapshot){
                        if (snapshot.val() === null){
                            $scope.invalidUsername = false;
                            console.log("the username is ok")
                        }else{
                            $scope.invalidUsername = true;
                            console.log("the username is not ok")

                        }

                    })}

提前致谢<3

Answer 1

不要在输入中使用ng-change。如果没记错的话，从 ng-model 到模型的更改发生在与 ng-change 处理程序不同的摘要周期中。

不要使用 ng-change，而是在模型上使用 $watch。将其添加到您的 Controller ，并删除 ng-change 属性:

$scope.$watch('user', $scope.verifyUser, true);

true 用于执行“深度监视”，因此当 user 的任何属性或子属性发生更改时，它将触发。处理函数还将接收新值和旧值作为参数。

在此处阅读有关 $watch 的更多信息:
scope.$watch