Я видел примеры, которые используют директивы, позволяющие AngularJS получать доступ к содержимому или свойствам файла (например, в Alex Such fiddle и сообщение в блоге), но я бы подумал, что следующий простой код будет работать (это не так).
HTML:
<body ng-app="myapp">
<div id="ContainingDiv" ng-controller="MainController as ctrl">
<input id="uploadInput" type="file" name="myFiles" onchange="grabFileContent()" />
<br />
{{ ctrl.content }}
</div>
</body>
JavaScript:
var myapp = angular.module('myapp', []);
myapp.controller('MainController', function () {
this.content = "[Waiting for File]";
this.showFileContent = function(fileContent){
this.content = fileContent;
};
});
var grabFileContent = function() {
var files = document.getElementById("uploadInput").files;
if (files && files.length > 0) {
var fileReader = new FileReader();
fileReader.addEventListener("load", function(event) {
var controller = angular.element(document.getElementById('ContainingDiv')).scope().ctrl;
controller.showFileContent(event.target.result);
});
fileReader.readAsText(files[0]);
}
};
Если я положу точку останова на строке this.content = fileContent
, я вижу, что значение content
изменяется с "[Ожидание файла]" и заменяется содержимым выбранного файла txt (в моем случае "Hallo" Мир"). Точка останова на controller.showFileContent(event.target.result)
показывает то же самое, значение изменяется от "[Ожидание файла]" до "Hallo World".
Но HTML никогда не обновляется, он остается как "[Ожидание файла]". Почему?
(N.B. Я поставил код в скрипку.)