Creé una directiva de validación personalizada y la usé en un formulario. Se puede activar sin problemas, pero después de que se activa la validación, descubrí que el valor del modelo se acaba de perder. Di que tengo

ng-model="project.key" 

y después de la validación,project.key ya no existe en el alcance. Creo que de alguna manera entendí AngularJS mal e hice algo mal.

El código habla.

Aquí está mi página html:

 <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>

Y aquí está mi directiva:

    .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);
                }

            }
        };
    });

Aquí está el controlador para la página del formulario:

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("/");
                            });
                        };
                }]);

Antes de este error, de alguna manera necesito manejar la validación requerida en mi directiva de validación personalizada también, si no lo hago, la validación requerida saldría mal. Ahora que lo pienso, tal vez la causa raíz de estos dos problemas sea la misma: el valor del modelo desaparece después de que se activa mi función de enlace de directiva.

Estoy usando Angular1.3 Beta 18 BTW.

Cualquier ayuda es apreciada. Gracias por adelantado.

Actualizar: Seguí la respuesta de @ ClarkPan, actualicé mi código areturn viewValue enctrl.$parsers.unshift() inmediatamente, lo que hacerequired La validación funciona bien ahora, así que ya no necesito líneas debajo.

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

Pero el{{project.key}} Todavía no se actualizó. Luego intenté comentar estas dos líneas aquí:

                    setAsLoading(true);
                    setAsValid(false);

Valor del modelo{{project.key}} Se actualizó. Sé que si falla alguna validación, el valor del modelo se borrará, pero pensé

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

en$http.get(...).success() debe ejecutarse en $ digest cycle, lo que significa que el valor del modelo debe actualizarse.

¿Qué está mal?