[英]Angular $scope conflict with file input type
I was trying to convert a file to byte array using angularjs. 我试图使用angularjs将文件转换为字节数组。 its working fine, also add the byte code and filename to an array($scope.FileAttachments), and when it'll be added to $scope.FileAttachments client side ng-repet will display the attached file. 它的工作正常,还将字节代码和文件名添加到数组($ scope.FileAttachments),当它被添加到$ scope.FileAttachments时,客户端ng-repet将显示附加文件。 file conversion done, file added to $scope.FileAttachments also done, but ng-repeat not working at right time. 文件转换完成后,文件添加到$ scope.FileAttachments也完成了,但是ng-repeat在正确的时间没有工作。 interesting issue is that, when any other event happened inside the view, ng-repeat working nicely. 有趣的问题是,当视图内部发生任何其他事件时,ng-repeat工作得很好。
HTML Code HTML代码
<input id="File1" ng-model="File1" onchange="angular.element(this).scope().file1Upload()" type="file" />
<table class="table table-striped table-bordered table-list">
<thead>
<tr>
<th>Name</th>
</tr>
</thead>
<tbody id="tblAttachments">
<tr ng-repeat="item in FileAttachments track by $index">
<td>{{item.AttachmentDescription}}</td>
</tr>
</tbody>
</table>
AngularJS Controller's Code AngularJS控制器的代码
$scope.FileAttachments = [];
var fileData;
function getBuffer(resolve) {
var reader = new FileReader();
reader.readAsArrayBuffer(fileData);
reader.onload = function () {
var arrayBuffer = reader.result
var bytes = new Uint8Array(arrayBuffer);
resolve(bytes);
}
}
$scope.file1Upload=function() {
var files = document.getElementById("File1").files;
fileData = new Blob([files[0]]);
var promise = new Promise(getBuffer);
promise.then(function (data) {
$scope.FileAttachments.push({
"AttachmentDescription": files[0].name.toString(),
"FileValue": data.toString()
});
}).catch(function (err) {
console.log('Error: ', err);
});
}
Yes, got it, need to use $scope.$apply() when outside the scope of your controller. 是的,得到它,需要使用$ scope。$ apply()超出控制器的范围。
$scope.file1Upload=function() {
var files = document.getElementById("File1").files;
fileData = new Blob([files[0]]);
var promise = new Promise(getBuffer);
promise.then(function (data) {
$scope.$apply(function () {
$scope.FileAttachments.push({
"AttachmentDescription": files[0].name.toString()
"FileValue": data.toString()
});
});
}).catch(function (err) {
console.log('Error: ', err);
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.