Javascript 为什么角度根范围变量仅在两次单击事件按钮后更新？

当我使用FileReader读取上传的文件并显示其数据时，我发现html中的rootScope变量在两次单击后将更新。但是我确信代码在第一次单击之后就已经执行了，因为变量已经更新了

这是我在互联网上发现的用于文件阅读器的小提琴，我仍然有同样的问题。您需要单击两次[添加]按钮，{{data}将更新

代码来自>

var myApp=angular.module（'myApp'，[]）；
函数MyCtrl（$scope）{
$scope.data='none'；
$scope.add=函数（）{
var f=document.getElementById（'file'）.files[0]，
r=新文件读取器（）；
r、 onloadend=函数（e）{
$scope.data=e.target.result；
}
r、 readAsBinaryString（f）；
}
}

添加
{{data}}

这是因为

onloadend

未在角度摘要循环中运行，因此即使更新了

数据

属性，也不会处理与范围相关的手表

var myApp=angular.module（'myApp'，[]）；
函数MyCtrl（$scope）{
$scope.data='none'；
$scope.add=函数（）{
var f=document.getElementById（'file'）.files[0]，
r=新文件读取器（）；
r、 onloadend=函数（e）{
$scope.data=e.target.result；
$scope.$apply（）；
}
r、 readAsBinaryString（f）；
}
}

添加
{{data}}