각도 AJAX 폼 유효성 확인

각도와 함께 작동하지만 기쁨이없는 일종의 기본 AJAX 폼 유효성 검사를 시도하고 있습니다. 나는 웹에서 모든 예를 시험해 본 것처럼 느껴지지만 내가 다른 것을 놓친다면 궁금해 할 수있는 일은 없다. 사용자 지정 지시문은 수동으로 생성하거나 웹에서 복사하여 붙여 넣을 때 호출되지 않습니다.각도 AJAX 폼 유효성 확인

는

은 내 HTML은과 같이 설정 :

<div ng-app="licenceApp" ng-controller="licenceController"> 
    <form name="licenceForm" novalidate> 
     <h2>Licence Key</h2> 
     Enter a valid licence key:<span>{{licenceForm.$valid}}</span><br /><br /> 

     <span style="position:relative;"> 
      <input type="text" name="LicenceKey" ng-model="LicenceKey" style="width:312px; text-align:center;" username-available-validator required /> 
      <span ng-if="licenceForm.LicenceKey.$pending"> 
       Checking LicenceKey... 
      </span> 

      <input type="submit" value="Apply Key" class="linkbutton" id="applyLicenceKey" style="position: absolute;" ng-disabled="licenceForm.$invalid" /> 
     </span> 
    </form>

내 자바 스크립트 코드는 (누구의 HTTP 호출 현재 작업 뭔가를 얻기 위해 시도의 copied from elsewhere로 실패합니다)

angular.module('licenceApp') 
    .directive('usernameAvailableValidator', ['$http', function ($http) { 
     return { 
      require: 'ngModel', 
      link: function ($scope, element, attrs, ngModel) { 
       ngModel.$asyncValidators.usernameAvailable = function (username) { 
        return $http.get('/api/username-exists?u=' + username); 
       }; 
      } 
     } 
    }]) 

// Register modules with the licence app 
angular.module('licenceApp', [ 
    'licenceApp.controllers', 
    'licenceApp.services', 
    'MyAngularFilters' 
]);

주입니다 나는 Chromes 콘솔을보고 요청이 만들어지지 않는 것을보고, 나는 또한 아무런 쓸모가없는 console.log을 추가하려고 시도했다. 어떤 핵심 요소가 빠졌습니까?

출처

2014-11-11 Chris

최소 1.3.0 각도를 사용하고 있는지 확인하십시오.

var app = angular.module('app', []); 
 
app.directive('usernameAvailableValidator', ['$http', 
 
    function($http) { 
 
    return { 
 
     require: 'ngModel', 
 
     link: function($scope, element, attrs, ngModel) { 
 
     ngModel.$asyncValidators.usernameAvailable = function(username) { 
 
      console.log("validet " +username) 
 
      $http.get('/api/username-exists?u=' + username); 
 
     }; 
 
     } 
 
    } 
 
    } 
 
]) 
 
app.controller('homeCtrl', function($scope) { 
 

 
    $scope.ver = angular.version.full; 
 

 

 
});

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script> 
 
<meta charset="utf-8"> 
 
<title>JS Bin</title> 
 
</head> 
 

 
<body> 
 
    <div ng-app="app"> 
 
    <div ng-controller="homeCtrl"> 
 
     Angular ver:{{ver}} 
 

 
     <form name="licenceForm" novalidate> 
 
     <h2>Licence Key</h2> 
 
     Enter a valid licence key:<span>{{licenceForm.$valid}}</span> 
 
     <br /> 
 
     <br /> 
 

 
     <span style="position:relative;"> 
 
      <input type="text" name="LicenceKey" ng-model="LicenceKey" style="width:312px; text-align:center;" username-available-validator required /> 
 
      <span ng-if="licenceForm.LicenceKey.$pending"> 
 
       Checking LicenceKey... 
 
      </span> 
 

 
     <input type="submit" value="Apply Key" class="linkbutton" id="applyLicenceKey" style="position: absolute;" ng-disabled="licenceForm.$invalid" /> 
 
     </span> 
 
     </form> 
 

 
    </div> 
 
    </div> 
 
</body>

출처

2014-11-11 17:10:53 sylwester

안녕하세요. 나는 1.3을 달리고있다. 내 지시문을 내 코드로 복사하면 작동하지 않습니다! 나는 실종 된 것을 이해할 수 없다. – Chris

각도 AJAX 폼 유효성 확인

답변

관련 문제