Ich habe eine benutzerdefinierte Validierungsanweisung erstellt und in einem Formular verwendet. Es kann problemlos ausgelöst werden, aber nachdem die Validierung ausgelöst wurde, habe ich festgestellt, dass der Modellwert gerade verloren gegangen ist. Sagen wir, ich habe

ng-model="project.key" 

und nach der Validierung,project.key existiert nicht mehr im Geltungsbereich. Ich denke, irgendwie habe ich AngularJS falsch verstanden und etwas falsch gemacht.

Code spricht.

Hier ist meine HTML-Seite:

 <div class="container">
    ...
    <div class="form-group"
            ng-class="{'has-error': form.key.$invalid && form.key.$dirty}">
            <label for="key" class="col-sm-2 control-label">Key</label>
            <div class="col-sm-10">
                <input type="text" class="form-control text-uppercase" name="key"
                    ng-model="project.key" ng-model-options="{ debounce: 700 }"
                    placeholder="unique key used in url"
                    my-uniquekey="vcs.stream.isProjectKeyValid" required />
                <div ng-messages="form.key.$error" ng-if="form.key.$dirty"
                    class="help-block">
                    <div ng-message="required">Project key is required.</div>
                    <div ng-message="loading">Checking if key is valid...</div>
                    <div ng-message="keyTaken">Project key already in use, please
                        use another one.</div>
                </div>
            </div>
        </div>
    <div class="col-sm-offset-5 col-sm-10">
        <br> <a href="#/" class="btn">Cancel</a>
        <button ng-click="save()" ng-disabled="form.$invalid"
            class="btn btn-primary">Save</button>
        <button ng-click="destroy()" ng-show="project.$key"
            class="btn btn-danger">Delete</button>
    </div>
</form>

Und hier ist meine Anweisung:

    .directive('myUniquekey', function($http) {
        return {
            restrict : 'A',
            require : 'ngModel',
            link : function(scope, elem, attrs, ctrl) {
                var requestTypeValue = attrs.myUniquekey;

                ctrl.$parsers.unshift(function(viewValue) {
                    // if (viewValue == undefined || viewValue == null
                    // || viewValue == "") {
                    // ctrl.$setValidity('required', false);
                    // } else {
                    // ctrl.$setValidity('required', true);
                    // }

                    setAsLoading(true);
                    setAsValid(false);

                    $http.get('/prism-cmti/2.1', {
                        params : {
                            requestType : requestTypeValue,
                            projectKey : viewValue.toUpperCase()
                        }
                    }).success(function(data) {
                        var isValid = data.isValid;
                        if (isValid) {
                            setAsLoading(false);
                            setAsValid(true);

                        } else {
                            setAsLoading(false);
                            setAsValid(false);
                        }
                    });

                    return viewValue;
                });

                function setAsLoading(bool) {
                    ctrl.$setValidity('loading', !bool);
                }

                function setAsValid(bool) {
                    ctrl.$setValidity('keyTaken', bool);
                }

            }
        };
    });

Hier ist der Controller für die Formularseite:

angular.module('psm3App').controller(
        'ProjectCreateCtrl',
        [ '$scope', '$http', '$routeParams', '$location',
                function($scope, $http, $routeParams, $location) {
                    $scope.save = function() {
                            $http.post('/prism-cmti/2.1', {requestType:'vcs.stream.addProject', project:$scope.project})
                            .success(function(data) {
                                $location.path("/");
                            });
                        };
                }]);

Vor diesem Fehler muss ich in meiner benutzerdefinierten Validierungsanweisung auch die erforderliche Validierung ausführen. Andernfalls würde die erforderliche Validierung fehlschlagen. Jetzt denke ich daran, vielleicht ist die Ursache dieser beiden Probleme dieselbe: Der Modellwert ist verschwunden, nachdem meine Direktiven-Link-Funktion ausgelöst wurde.

Ich benutze Angular1.3 Beta 18 BTW.

Jede Hilfe wird geschätzt. Danke im Voraus.

Aktualisieren: Nach der Antwort von @ ClarkPan habe ich meinen Code auf aktualisiertreturn viewValue imctrl.$parsers.unshift() sofort, was machtrequired Die Validierung funktioniert jetzt gut, daher brauche ich keine Zeilen darunter mehr.

        // if (viewValue == undefined || viewValue == null
                    // || viewValue == "") {
                    // ctrl.$setValidity('required', false);
                    // } else {
                    // ctrl.$setValidity('required', true);
                    // }

Aber die{{project.key}} wurde immer noch nicht aktualisiert. Dann habe ich versucht, diese beiden Zeilen hier zu kommentieren:

                    setAsLoading(true);
                    setAsValid(false);

Modellwert{{project.key}} wurde aktualisiert. Ich weiß, dass der Modellwert gelöscht wird, wenn eine Validierung fehlschlägt, aber ich dachte

                      function(data) {
                            var isValid = data.isValid;
                            if (isValid) {
                                setAsLoading(false);
                                setAsValid(true);
                            } else {
                                setAsLoading(false);
                                setAsValid(false);
                            }
                        }

im$http.get(...).success() sollte im $ digest-Zyklus ausgeführt werden, was bedeutet, dass der Modellwert aktualisiert werden sollte.

Was ist falsch?