1

FileReaderを使用してアップロードされたファイルを読み取り、そのデータを表示すると、html の rootScope 変数が 2 回クリックすると更新されることがわかりました。しかし、変数が更新されているため、最初のクリック後にコードが実行されたと確信しています。

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

これは、fileReader を使用するためにインターネットで見つけたフィドルですが、それでも同じ問題があります。{{ data }}を更新するには、 [追加]ボタンを 2 回クリックする必要があります。

コードはからのものです > 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>

4

1 に答える 1

2

これは、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>

于 2015-10-09T07:39:40.363 に答える