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

Question

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

http://jsfiddle.net/f8Hee/1/

这是我在网上找到的fiddle使用fileReader的方法，我还是遇到了同样的问题。您需要点击 [添加] 按钮两次 {{ 数据 }} 将更新。

代码来自 > File Upload using AngularJS

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.data = 'none';
    $scope.add = function(){
      var f = document.getElementById('file').files[0],
          r = new FileReader();
      r.onloadend = function(e){
        $scope.data = e.target.result;
      }
      r.readAsBinaryString(f);
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller="MyCtrl">
  <input type="file" id="file" name="file"/>
  <br>
  <button ng-click="add()">Add</button>
  <p>{{data}}</p>
</div>

Answer 1

这是因为 onloadend 不在 angular 摘要循环中运行，所以即使更新了 data 属性关联的手表范围未处理。

var myApp = angular.module('myApp', []);

function MyCtrl($scope) {
  $scope.data = 'none';
  $scope.add = function() {
    var f = document.getElementById('file').files[0],
      r = new FileReader();
    r.onloadend = function(e) {
      $scope.data = e.target.result;
      $scope.$apply();
    }
    r.readAsBinaryString(f);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="MyCtrl">
    <input type="file" id="file" name="file" />
    <br>
    <button ng-click="add()">Add</button>
    <p>{{data}}</p>
  </div>
</div>

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

Why the angular root scope variable only updated after twice click on event button?

html

javascript

angularjs

rootscope