angularjs:如何在指令中使用if-else条件


angularjs: how to use if-else condition in directives

当用户在文本框中输入用户名时,指令将检查该用户名是否已存在或在数据库中可用。如果用户存在,文本框旁边会显示一条警告,说明"用户已经存在"。如果它不存在,就会出现一条警告,上面写着"用户名可用"。

我的问题是,当我在文本框中输入现有用户名时,它什么都不显示,但当我输入数据库中不存在的用户名时,就会显示"用户名存在"。为什么会发生这种情况?

uniqueUsers.php

<?php
$app->get('/uniqueUsername/:username', function ($username) {
$status_code = 200;
$resp = array('status'=>'success','message'=>'Query Success','data'=>null);
$resp['data'] = User::find_by_active_and_username('1',$username); 
   if(is_object($resp['data'])){
      $resp['data'] = $resp['data']->to_array();
   }
   else{
      $resp['data'] = objToArr($resp['data']);
   }
   JSONResponse($status_code,$resp);
});

指令:用户名可用.js

angular.module('installApp')
.directive('usernameAvailable', function ($http, $timeout) {
   return {
     restrict: 'AE',
     require: 'ngModel',
     link: function(scope, elm, attr, model) { 
        model.$asyncValidators.usernameAvailable = function(username) { 
          return $http.get('../api/v1/uniqueUsername'+'/'+username).then(function(res){+
                $timeout(function(){
                    model.$setValidity('usernameAvailable', !!res.data); 
                }, 1000);
            }); 
        };
     }
  };
});

HTML:accounts.HTML

  <input type="text" name="username" ng-model="username" username-available required ng-model-options="{ updateOn: 'blur' }">
  <div ng-if="myForm.$pending.usernameAvailable">checking....</div>
  <div ng-if="myForm.$error.usernameAvailable">Username available</div>

请帮忙。提前感谢:-)

使用ng-messages指令,例如

<div ng-if="myForm.username.$dirty">
           <div ng-messages="myForm.username.$error" class="validation-error">
                <div ng-message="required">Username required</div>
                     <div ng-message="username">Username already in use</div>
                 </div>
               <div ng-messages="myForm.username.$pending" class="validation-pending">
                     <div ng-message="username">Checking username availability...</div>
                        </div>
                    </div>