값이 DB에 이미 존재하는지 확인하기 위해 AngularJS의 사용자 지정 지시문의 범위

Question

전자 메일이 이미 DB에 있는지 확인하기 위해 만든 사용자 지정 지정 문에서 범위 문제가 있습니다. 실제로 AJAX 쿼리에 의해 검색된 결과는 범위 (및 내 템플릿)에 반환되지 않습니다.

이메일은 사용자가 5 이메일까지 등록 할 수 있습니다 내 응용 프로그램에서이 주제 angularjs: custom directive to check if a username exists

에 정의 된 DB에 이미 존재하는 경우 내가 확인하기위한 솔루션을 따를 것을 구현하기위한

. 사용자가 필드에 전자 메일을 입력하면 쿼리가 올바르게 실행되어 전자 메일이 데이터베이스에서 이미 사용되었는지 확인합니다. 쿼리는

여기 내 컨트롤러 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); 
    } 

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

여기

내 공장 :

여기

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; 

}) 

내 템플릿 :

을

<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}}이 비어있는 이유는 비동기 콜백에서 반환하지 않았기 때문입니다.