O valor do modelo ng do AngularJS é perdido após o acionamento da diretiva de validação personalizada
Criei uma diretiva de validação personalizada e a usei em um formulário. Ele pode ser acionado sem problemas, mas depois que a validação é acionada, descobri que o valor do modelo está perdido. Diga que eu tenho
ng-model="project.key"
e após a validação,project.key
não existe mais no escopo. Eu acho que de alguma maneira eu entendi o AngularJS errado e fiz algo errado.
O código fala.
Aqui está minha 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>
E aqui está a minha diretiva:
.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);
}
}
};
});
Aqui está o controlador da página do formulário:
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 desse bug, de alguma forma eu também preciso lidar com a validação exigida na minha diretiva de validação personalizada; se não o fizer, a validação necessária daria errado. Agora, penso nisso, talvez a causa raiz desses dois problemas seja a mesma: o valor do modelo desapareceu depois que minha função de link de diretiva foi acionada.
Estou usando o Angular1.3 Beta 18 BTW.
Qualquer ajuda é apreciada. Desde já, obrigado.
Atualizar: Seguida a resposta de @ ClarkPan, atualizei meu código parareturn viewValue
noctrl.$parsers.unshift()
imediatamente, o que tornarequired
a validação funciona bem agora, então não preciso mais de linhas abaixo.
// if (viewValue == undefined || viewValue == null
// || viewValue == "") {
// ctrl.$setValidity('required', false);
// } else {
// ctrl.$setValidity('required', true);
// }
Mas o{{project.key}}
ainda não foi atualizado. Então eu tentei comentar essas duas linhas aqui:
setAsLoading(true);
setAsValid(false);
Valor do modelo{{project.key}}
foi atualizado. Sei que, se alguma validação falhar, o valor do modelo será limpo, mas pensei
function(data) {
var isValid = data.isValid;
if (isValid) {
setAsLoading(false);
setAsValid(true);
} else {
setAsLoading(false);
setAsValid(false);
}
}
no$http.get(...).success()
deve ser executado no ciclo $ digest, o que significa que o valor do modelo deve ser atualizado.
O que está errado?