如果使用“＆＃39;
进行更改，如何触发更改我使用自定义文件指令
指令：
app.directive('ngFileModel', ['$parse', function($parse) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
var model = $parse(attrs.ngFileModel);
var isMultiple = attrs.multiple;
var modelSetter = model.assign;
element.bind('change', function() {
var values = [];
angular.forEach(element[0].files, function(item) {
var value = {
// File Name
name: item.name,
//File Size
size: item.size,
//File URL to view
url: URL.createObjectURL(item),
// File Input Value
_file: item
};
values.push(value);
});
scope.$apply(function() {
if (isMultiple) {
modelSetter(scope, values);
} else {
modelSetter(scope, values[0]);
}
});
});
}
};
}]);
如何在不使用ng-model的情况下使用ng-change
HTML：
<input type="file" name="" ng-file-model="uploadThisImage" ng-change="onFileSelect($index)">
答案 0 :(得分：1)
ng-model 该指令使<input type=file>能够自动使用ng-change和ng-form指令。
AngularJS内置<input>指令不处理<input type=file>。人们需要一个自定义指令。
<input type="file" files-input ng-model="fileArray"
ng-change="onFileSelect()" multiple />
files-input指令：
angular.module("app").directive("filesInput", function() {
return {
require: "ngModel",
link: function postLink(scope,elem,attrs,ngModel) {
elem.on("change", function(e) {
var files = elem[0].files;
ngModel.$setViewValue(files);
})
}
}
})
上面的指令添加了一个更改侦听器，它使用input元素的files属性更新模型。
files-input指令的内联演示
angular.module("app",[]);
angular.module("app").directive("filesInput", function() {
return {
require: "ngModel",
link: function postLink(scope,elem,attrs,ngModel) {
elem.on("change", function(e) {
var files = elem[0].files;
ngModel.$setViewValue(files);
})
}
}
});<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="app">
<h1>AngularJS Input `type=file` Demo</h1>
<input type="file" files-input ng-model="fileArray" multiple>
<h2>Files</h2>
<div ng-repeat="file in fileArray">
{{file.name}}
</div>
</body>