HTML:
<form name="form">
<input type="file" ng-model="document" valid-file required>
<input type="submit" value="{{ !form.$valid && 'invalid' || 'valid' }}">
</form>
用于侦听输入[type = file]的自定义指令更改:
myApp.directive('validFile',function(){
return {
require:'ngModel',
link:function(scope,el,attrs,ngModel){
//change event is fired when file is selected
el.bind('change',function(){
scope.$apply(function(){
ngModel.$setViewValue(el.val());
ngModel.$render();
});
});
}
};
});
选择文件后,控制台中出现以下错误:
错误:InvalidStateError:DOM异常11错误:尝试进行了尝试 使用不可用或不再可用的对象。
尝试使用plunkr:http://plnkr.co/edit/C5j5e0JyMjt9vUopLDHc?p=preview
如果没有指令,输入文件字段的状态将不会被推送到。$ valid。任何想法,为什么我得到这个错误以及如何解决这个问题?
答案 0 :(得分:29)
需要更新视图时调用。 有望的 ng-model指令的用户将实现此方法。
你需要实现$ render()来调用它。你可以做这样的事情
myApp.directive('validFile', function () {
return {
require: 'ngModel',
link: function (scope, el, attrs, ngModel) {
ngModel.$render = function () {
ngModel.$setViewValue(el.val());
};
el.bind('change', function () {
scope.$apply(function () {
ngModel.$render();
});
});
}
};
});
的 DEMO 强>
答案 1 :(得分:4)
更新到AngularJS 1.2.x后,代码段看起来不再正常工作,文件输入不会粘在选定的文件值上,使表单无法使用。
将指令更改回原始指令,并删除ngModel.$render()
它看起来像魅力:
.directive('validFile', function () {
return {
restrict: 'A',
require: '?ngModel',
link: function (scope, el, attrs, ngModel) {
el.bind('change', function () {
scope.$apply(function () {
ngModel.$setViewValue(el.val());
});
});
}
};