1

の挙動がよくわからず困っています。

カスタム検証か、何か誤解している可能性があります。

ディレクティブ トリガーは、outite watch と invalid の内部で 1 回、watch の内部で 2 回トリガーされます (少なくとも私のテストでは)。

私の目標は、必要な後に追加のカスタム検証をトリガーすることです

メールルールは有効ですが、まったく機能しません。

だからコード

<!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 
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 に答える
0

AngularJS のドキュメントから:

$parsers:コントロールが DOM から値を読み取るたびに、パイプラインとして実行する関数の配列。各関数が順番に呼び出され、値が次の関数に渡されます。最後の戻り値は、モデルを設定するために使用されます。値のサニタイズ/変換と検証に使用されます。検証のために、パーサーは $setValidity() を使用して有効性の状態を更新し、無効な値に対して undefined を返す必要があります。

これに基づいて、(ctrl.$parsers.push を使用して) パイプの最後に $parser を追加すると、入力値が無効な場合、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 に答える