1

我遇到了很多麻烦，我不明白他们的行为

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

该指令触发一次 ousite watch 和 inside invalid 和两次 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;
    }
}
4

2 回答 2

0

来自 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
                            }
                        });
                    }
                }
于 2014-08-19T21:06:56.730 回答
0 
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;
                            });
                        });
                    }
                }
            });

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

于 2013-09-26T12:15:31.163 回答