ng-show 和 ng-change 不需要的延迟

Question

我是 angularjs 和 firebase 的新手。我正在尝试制作一个用户插入用户名的表单。每次<input> 更改时，我都会检查用户名是否已被占用或免费。如果用户名已经被占用，我想显示一个<p>，上面写着“用户名已经被占用”。

问题是这样的：如果我插入一个已经使用的用户名（例如“Damiano”），控制台会显示“用户名不正确”，但 @987654323带有 ng-show 的 @ 段落不会出现。但是，如果我在用户名中添加一个字母（例如“Damianox”），控制台会显示“用户名正常”并出现<p> 段落！但它不能出现，因为用户名“Damianox”是免费的！

好像有一封信迟到了！

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

这是 fistime.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")

                        }

                    })}

提前致谢

Answer 1

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

不要使用ng-change，而是在您的模型上使用$watch。将此添加到您的控制器，并删除 ng-change 属性：

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

true 是用来做“深度观察”的，所以它会在user 的任何属性或子属性发生变化时触发。处理函数还将接收新旧值作为参数。

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

Answer 2

这里的问题是invalidUsername 的更改不会触发您的情况下的新摘要循环。

您可以使用$timeout 解决此问题。 注入$timeout 后，您可以更改代码（我在这里简化了您的 if/else 案例）：

q.once("value", function(snapshot){
     $timeout(function(){
          $scope.invalidUsername = snapshot.val() === null;
     });
})}