自定义电子邮件验证指令不显示验证结果

Question

我正在尝试验证电子邮件是否存在于我的数据库中。

JS

var app = angular.module('emailValidApp', [])
app.directive('validateEmail', function($http) {
       return {
         restrict: 'A',
            scope: true,
            require: 'ngModel',
            link: function(scope, elem, attrs, ctrls) {
                var ngModel = ctrls;
                scope.$watch(attrs.ngModel, function(email) {
                    var url = 'http://xxxx:8081/xxxx/user/getemail?email='+email;

                       $http.get(url)
                       .then(function(data) {
                          if (data.email_valid) {
                               ngModel.$setValidity('validEmail', false);
                          } else {
                               ngModel.$setValidity('validEmail', true);
                          }
                        }, function(error) {
                             ngModel.$setValidity('validEmail', false);
                        });
                });
            }
        }
});
app.controller('SignUpController', function($scope) {

$scope.signMeup;
 });

view.jsp的

<form name="signupForm" ng-submit="signMeUp()">
<div>
<label>Email</label>
<input type="email" name="email_addr" ng-model="info.email" validate-email/>
<span ng-show="signupForm.email_addr.$validEmail">
<p>This email address already exists.</p>
</span>
</div>
<button type="submit" ng-disabled="signupForm.$invalid">Submit</button> 
</form>

我能够在我的控制台中看到电子邮件是否有效但在我的视图中是否有效。

请帮帮我

谢谢

Answer 1

使用<div class="wrapper"> <div class="scrolls"> <div> 1 </div> <div> 2 </div> <div> 3 </div> <div> 4 </div> <div> 5 </div> <div> 6 </div> <div> 7 </div> <div> 8 </div> <div> 9 </div> <div> 10 </div> <div> 11 </div> <div> 12 </div> <div> 13 </div> <div> 14 </div> </div> </div>代替<span ng-show="signupForm.email_addr.$invalid">。它应该解决你的问题。

Answer 2

我只是通过修改我的js [data.data]

中的部分来找出错误

$http.get(url)
      .then(function(data) {
      console.log(data.data);
                           if (data.data) {
                               console.log("inside if : "+ngModel.$setValidity('validEmail', false));
                               ngModel.$setValidity('validEmail', false);
                          } else {
                              console.log("inside else :" +ngModel.$setValidity('validEmail', true))
                               ngModel.$setValidity('validEmail', true);
                          }