Question

我遇到了很多麻烦，我不明白

的行为

自定义验证或者可能是我误解了一些东西。

该指令触发一次ousite watch并且内部无效且两次内部监视（至少在我的测试中）

我的目标是在所需的

之后触发额外的自定义验证

并且电子邮件规则有效，但根本不起作用。

所以代码

<!doctype html>
<html data-ng-app="myApp">
    <head>
         <meta charset="utf-8">

    </head>
    <body>
        <div data-ng-controller="myCtrl">
            <form novalidate id="frm-signup" name="addContestantFrm" data-ng-submit="addContestant()">
                <div>
                    <label for="email">Email: *</label>
                    <input type="email" id="email" name="email" class="input-medium" tabindex="3" title="email" maxlength="255" value="{{contestant.email}}" placeholder="email" data-ng-model="contestant.email" required email-unique />
                </div>
                <div>
                    <input type="submit" id="sbmt" name="sbmt" class="input-sbt" data-ng-disabled="!addContestantFrm.$valid" value="Send" />
                </div>
            </form>
        </div>
         <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
        <script src="http://code.angularjs.org/1.0.8/angular.min.js"></script>
        <script>
            var app = angular.module('myApp', []);
            app.factory('Contestant',function($http){
                return {
                    checkUniqueEmail : function(email){
                        return $http.post('./checkemail.php',{email:email});
                    }
                }
            });
            app.controller('myCtrl',function($scope){

            });
            app.directive('emailUnique',function(Contestant) {
                return {
                    require: 'ngModel',
                    link: function(scope, element, attrs,ctrl) {
                    Contestant.checkUniqueEmail(attrs.emailUnique).success(function (response) {
                    ctrl.$setValidity('emailUnique', true);
                    console.log('inside valid');
                    console.log(attrs.emailUnique);
                    console.log('end inside valid');
                    return attrs.emailUnique;
                })
                .error(function (data) {
                    console.log('inside invalid');
                    ctrl.$setValidity('emailUnique', false);
                     console.log('end inside invalid');
                    return undefined;
                });

               scope.$watch(attrs.ngModel, function() {
                    console.log('I am inside watch');
                    console.log(ctrl.$error.required);
                    console.log(ctrl.$error.email);
                    console.log('end watch');

                });
                console.log('ouside');
                console.log(attrs.emailUnique);
                console.log('end ouside');

            }
        }
    });
        </script>
    </body>
</html>

和假支票

<?php
$data = file_get_contents("php://input"); 
$data = json_decode($data,true);
if(isset($data['email'])){
    if(empty($data['email'])){
        header("HTTP/1.0 404 Not Found");
        exit;
    }
    elseif($data['email'] !== 'admin@goo.com'){
        header("HTTP/1.0 404 Not Found");
        exit;
    }
    else{
        header("HTTP/1.1 200 OK");
        return $data['email'];
        exit;
    }
}

Answer 1

app.directive('emailUnique',function(Contestant) {
                return {
                    require: 'ngModel',
                    link: function(scope, element, attrs,ctrl) {
                        ctrl.$parsers.unshift(function(viewValue) {
                            console.log(ctrl.$error.email);
                            Contestant.checkUniqueEmail(viewValue).success(function (response) {
                                ctrl.$setValidity('emailUnique', true);
                                console.log(viewValue);
                                return viewValue;
                            })
                            .error(function (data) {
                                ctrl.$setValidity('emailUnique', false);
                                console.log(viewValue);
                                return undefined;
                            });
                        });
                    }
                }
            });

现在它可以工作，但我只想在有效的电子邮件时调用xhr 的 CTRL。$ error.email 总是假的给我:(

Answer 2

来自AngularJS文档：

$ parsers：每当执行时，作为管道执行的函数数组控件从DOM读取值。反过来，每个函数被调用将值传递给下一个。使用最后一个返回值填充模型。用于消毒/转换价值以及验证。 对于验证，解析器应更新有效性使用$ setValidity（）进行状态，并为无效值返回undefined 。

基于此，如果我们在管道的末尾添加$ parser（使用ctrl。$ parsers.push），那么，如果输入值无效，则viewValue参数将是未定义的。

我写了这个例子来阐明解析器是如何工作的：http://jsfiddle.net/oua78v19/7/（检查控制台以了解参数值在有效时如何更改）

更新了代码示例：

app.directive('emailUnique',function(Contestant) {
                return {
                    require: 'ngModel',
                    link: function(scope, element, attrs,ctrl) {
                        ctrl.$parsers.push(function(viewValue) {
                            if (viewValue) {
                                // we have a valid email address
                                // we can do now an ajax call to see 
                                // if email is already in use
                            }
                        });
                    }
                }

角度自定义验证唯一电子邮件触发器

2 个答案: