DB内に既に値が存在するかどうかを確認するためのAngularJSのカスタムディレクティブ

Question

DBに電子メールがすでに存在するかどうかをチェックするために作成されたカスタムディレクティブのスコープに問題があります。実際、AJAXクエリによって取得された結果はスコープ（およびテンプレート内）に返されません。電子メールは、すでにユーザーが5つの電子メールまで登録することができます私のアプリケーションでangularjs: custom directive to check if a username exists

、このトピックで定義されたDBに存在している場合、私はチェックするための解決策に従っていることを実現するため

。ユーザーがフィールドに電子メールを入力すると、電子メールがデータベース内ですでに使用されているかどうかを確認するためのクエリが正しく実行されます。

app.factory('ContactService', function($http){ 

    var factory={}; 

    // CALL COLDFUSION FUNCTION --> GET JSON RESULTS ON PERSONS DATA  
    factory.searchContactByEmail=function(string){ 
     if (string){ 
      chaine='http://myapp/contacts.cfc?method=searchContactByEmail&contactEmail=' + string;  
     }else{ 
      chaine='';  
     } 
     return $http.get(chaine); 
    }; 

    return factory; 

}) 

ここ私のテンプレート：

問合せは、JSON形式で同じメールで

ここ私のコントローラ

// MY CUSTOM DIRECTIVE FOR CHECKING IF EMAIL IS ALREADY USED 
app.directive('emailAvailable', function($timeout, $q, $http, ContactService) { 
    return { 
     restrict: 'AE', 
     require: 'ngModel', 
     link: function(scope, elm, attr, model) { 
      model.$asyncValidators.emailExists = function() { 
       email= elm.val(); 
       return ContactService.searchContactByEmail(email).success(function(con){ 
        $timeout(function(){ 
        if(email.length >0){ 
         if(con.length >0){ 
          model.$setValidity('emailExists', false); 
          scope.emailAlreadyExist='true'; 
          scope.con = con; 
          console.log('NB: ' + scope.con.length); // IT'S WORKING 
          console.log("email exist: " + scope.emailAlreadyExist); // IT'S WORKING TOO       
         }else{ 
          model.$setValidity('emailExists', true); 
          scope.emailAlreadyExist='false';  
          scope.con = null;  
          alert('jjjjj' + con); 

          console.log("email NOT EXIST : " + scope.emailAlreadyExist);        
         } 
        } 
        }, 1000); 
       }); 

      }; 
     } 
    } 
}); 


app.controller('ctrlAddContacts', function ($scope, MyTextSearch, ContactService){ 

    $scope.emailAlreadyExist = false; 


    // ALLOW TO HAVE SEVERAL EMAILS 
    $scope.emails = [ 
    { 
    }]; 
    $scope.log = function() { 
     console.log($scope.emails); 
    }; 
    $scope.add = function() { 
     var dataObj = {email:''};  
     $scope.emails.push(dataObj); 
    } 

    ........... 
}); 

ここ私の工場を人に返します

<div ng-repeat="(key, email) in emails | limitTo : 5" style="z-index:6"> 

    <div class="form-group"> 

    <span ng-switch="$index"> 
     <label ng-switch-when="0" for="txtEmail" class="col-sm-2 control-label">Main email</label> 
     <label ng-switch-default for="txtEmail" class="col-sm-2 control-label">Email {{$index+1}}</label> 
    </span> 

    <div class="col-sm-9" ng-switch="$index"> 

     <input ng-switch-when="0" type="email" class="form-control" 
     name="txtEmail_{{$index}}" maxlength="100" placeholder="Enter main email" 
     ng-model="contact.EMAIL" 
     email-available emailexist = "emailAlreadyExist " > 


     <input ng-switch-default type="email" class="form-control" 
     name="txtEmail_{{$index}}" maxlength="100" placeholder="Enter Email {{$index+1}}" 
     ng-model="contact['EMAIL_'+$index]" 
     email-available emailexist = "emailAlreadyExist " >  

     <!--------------------- PROBLEM FOR DISPLAYING THE CONTACTS PERSON WITH THE EMAIL --------------------- START ---------------------> 
     {{con}} 
     <!--------------------- PROBLEM FOR DISPLAYING THE CONTACTS PERSON WITH THE EMAIL ---------------------- END ----------------------> 

     <div ng-show="ContactForm['txtEmail_' + $index].$dirty && ContactForm['txtEmail_' + $index].$error.emailExists" class="alert alert-info" role="alert" style="margin-top:10px;"> 
     <span class="glyphicon glyphicon-alert" aria-hidden="true"></span> 
     <span class="sr-only">Error:</span> 
      This email is already used <!--- CORRECTLY DISPLAYED WHEN THE EMAIL IS ALREADY USED IN THE DB ---> 

      <!--------------------- PROBLEM FOR DISPLAYING THE CONTACTS PERSON WITH THE EMAIL --------------------- START ---------------------> 
      <ul id="contacts_list"> 
       <li ng-repeat=" contact in con" style="position:relative; z-index:25"> 
        <div angular-popover direction="right" template-url="template/popover.html" mode="mouseover"> 
         <a href="#/view-contacts/{{contact.id}}">{{ contact.lastname }} {{ contact.firsttname }}</a> 
        </div> 
       </li> 
      </ul> 
      <!--------------------- PROBLEM FOR DISPLAYING THE CONTACTS PERSON WITH THE EMAIL ---------------------- END ----------------------> 
     </div> 

    </div> 

    <div class="col-sm-1" ng-show="$index == 0"> 
     <a href="" ng-click="add()" ng-show="emails.length<5" class="inline btn btn-primary icon_email"> 
     <span class="glyphicon glyphicon-plus icon2"></span><span class="addButton">Add</span> 
     </a> 
    </div> 

    </div> 

</div> 

この問題を解決してもらえますか？あなたの助け

Answer 1

（少なくとも角で1.6+）$httpため

おかげで約束を返すことができますが、それから、実際のデータを返すために責任があります。単純な例では、必要があります：

return $http.get(url). 
then((res) => { 
    return res.data; 
}); 

お知らせリターン約束とデータ用に使用両方。

複雑な例では見えませんが、{{con}}が空の理由は、非同期コールバックから返されたことがないからです。