Почему переменная угловой области видимости обновляется только после двойного нажатия на кнопку события?

Question

Когда я использую FileReader, чтобы прочитать загруженный файл и показать его данные, я обнаружил, что переменная rootScope в html будет обновляться после двойного щелчка мышью. Но я уверен, что код был выполнен после первого клика, потому что переменная была обновлена.

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

Это та скрипка, которую я нашел в интернете для использования fileReader, и у меня все та же проблема со мной. Вам нужно нажать кнопку [добавить] дважды, чтобы обновить {{ data }}.

Код приходит из> Загрузка файла с помощью 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 не работает в угловой петле дайджеста, поэтому даже если 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>