Question

我是angularjs和firebase的新手。我试图创建一个用户插入用户名的表单。每次<input>更改时，我都会检查用户名是否已被占用或是免费的。如果已经使用了用户名，我想显示一个<p>，其中显示＆＃34;用户名已经被取消＆＃34;。

问题是这个：如果我插入已经使用的用户名（例如＆＃34; Damiano ＆＃34;），控制台会说＆＃34;用户名不正常＆＃34;但是没有出现带有ng-show的<p>段落。但是，如果我在用户名中添加一个字母（例如＆＃34; Damianox ＆＃34;），控制台会说＆＃34;用户名是好的＆＃34;并出现<p>段！但它的出现是因为用户名＆＃34; Damianox＆＃34;免费！

似乎有一封信的延迟！

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

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

                        }

                    })}

提前致谢＆lt; 3

Answer 1

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

不使用ng-change，而是在模型上使用$watch。将其添加到您的控制器，然后删除ng-change attrbute：

$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;
     });
})}

ng-show和ng-改变不需要的延迟

2 个答案: