Значение AngularJS ng-модели теряется после запуска пользовательской директивы проверки
Я создал специальную директиву проверки и использовал ее в форме. Он может быть запущен без проблем, но после запуска проверки я обнаружил, что значение модели просто потеряно. Скажи у меня
ng-model="project.key"
и после проверки,project.key
больше не существует в сфере. Я думаю, что почему-то я неправильно понял AngularJS и сделал что-то не так.
Код говорит.
Вот моя 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>
И вот моя директива:
.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);
}
}
};
});
Вот контроллер для страницы формы:
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("/");
});
};
}]);
Перед этой ошибкой мне как-то нужно обрабатывать требуемую проверку в моей пользовательской директиве проверки, если я не сделаю этого, требуемая проверка может быть неправильной. Теперь я думаю об этом, возможно, коренная причина этих двух проблем одна и та же: значение модели исчезло после того, как сработала моя функция директивной ссылки.
Я использую Angular1.3 Beta 18 BTW.
Любая помощь приветствуется. Заранее спасибо.
Обновить: После ответа @ ClarkPan я обновил свой код доreturn viewValue
вctrl.$parsers.unshift()
немедленно, что делаетrequired
проверка работает хорошо, поэтому мне больше не нужны строки ниже.
// if (viewValue == undefined || viewValue == null
// || viewValue == "") {
// ctrl.$setValidity('required', false);
// } else {
// ctrl.$setValidity('required', true);
// }
Но{{project.key}}
еще не обновился. Затем я попытался закомментировать эти две строки здесь:
setAsLoading(true);
setAsValid(false);
Значение модели{{project.key}}
получил обновление. Я знаю, что если какая-либо проверка завершится неудачно, значение модели будет очищено, но я подумал
function(data) {
var isValid = data.isValid;
if (isValid) {
setAsLoading(false);
setAsValid(true);
} else {
setAsLoading(false);
setAsValid(false);
}
}
в$http.get(...).success()
должен выполняться в цикле $ digest, что означает обновление значения модели.
Что случилось?