Angular file上传范围未定义
Angular file上传范围未定义
提问于 2018-06-15 07:11:48
这是指令。
app.directive("fileInput", function($parse){
return{
link: function($scope, element, attrs){
element.on("change", function(event){
var files = event.target.files;
$parse(attrs.fileInput).assign($scope, element[0].files);
console.log(element[0].files);//this shows file
$scope.$apply();
});
}
}
});HTML部件：
<input class="inputFile" type="file" id="files" file-input="files">
<button type="button" ng-click="uploadFile();">Submit</button>控制器功能：
$scope.uploadFile = function(){
console.log($scope.files);//this is undefined
if(!$scope.files){
alert("select file");//prog is getting stuck here
}else{/*some code*/} $Scope和每个依赖项都是控制器，仍然没有得到文件。请告诉我在哪里做错了，因为相同的代码运行在其他模块中。
uploadFile();回答 1
Stack Overflow用户
发布于 2018-06-15 17:05:27
重新设计的解决方案可以如下所示(这将不适用于A1.2，但应该适用于1.5+)
var app = angular.module('app', []);
app.controller('test', ['$scope', function($scope) {
$scope.files = [];
$scope.addFile = function(file) {
$scope.files.push(file)
}
$scope.listFiles = function() {
console.log($scope.files);
}
}]);
app.directive("fileInput", function($parse) {
return {
scope: {
onFileAdded: '&'
},
link: function($scope, element, attrs) {
element.on("change", function(event) {
var files = element[0].files;
$scope.onFileAdded({
$file: files
})
});
}
}
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div data-ng-app="app">
<div data-ng-controller="test">
<input class="inputFile" type="file" id="files" file-input="files" on-file-added="addFile($file)">
<button type="button" ng-click="listFiles();">Submit</button>
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/-100005408
复制相关文章
相似问题
腾讯云开发者
