我创建了一个自定义验证指令并在表单中使用它。可以正常触发,但是触发验证后,发现model值就丢了。说我有
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。
任何帮助表示赞赏。提前致谢。
Update:按照@ClarkPan的回答,我将代码更新为return viewValue
in ctrl.$parsers.unshift()
立即,这使得required
验证现在运行良好,因此我不再需要下面的行。
// if (viewValue == undefined || viewValue == null
// || viewValue == "") {
// ctrl.$setValidity('required', false);
// } else {
// ctrl.$setValidity('required', true);
// }
But the {{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);
}
}
in $http.get(...).success()
应该在 $digest 周期中执行,这意味着应该更新模型值。
怎么了?