Reader.onloadイメージファイルをblob anglejsにアップロードする

Question

私はこの問題に瀕しています。アップデートイメージボタンをクリックしようとすると次のようなことが起こります。私のconsole.logにもかかわらず最初の試行でイメージアップデートを実行できないので、正しい値が返されます。何が起こるのは、私がバックエンドにリクエストをするときに、更新ボタンを初めてロードすると、以前にあったイメージのBLOBが返され、また、再試行すると、私が実行しようとしたイメージのBLOBが返されます。前の瞬間と挿入DBに。要するに、彼はいつも遅れた要求をしています。私は既に$スコープを追加しようとしました。 $ Apply（）とそれは動作しませんでした。要するに

First update the blob of the previous image

Second update the blob correct of the image

私は二度、私が欲しいものにイメージを変えることができるように更新を行う必要があります。

コード：

function uploadFile(){ 
    var file = $scope.profilePic; 
    var blob = new Blob([file], { 
     "type": "text/html" 
    }); 

    var reader = new FileReader(); 

    reader.onload = function(e) { 
     $scope.text = e.target.result.split(',')[1]; 
     $scope.loadedUser.profilePic = $scope.text; 
    } 

    reader.readAsDataURL(blob); 

}; 

HTML：

<div layout-gt-sm="row" style="margin-bottom: 20px;">              
    <input type="file" name="profilePic" fileread="profilePic"> 
</div> 

APP：

app.directive("fileread", [function() { 
    return { 
     scope: { 
      fileread: "=" 
     }, 
     link: function (scope, element, attributes) { 
      element.bind("change", function (changeEvent) { 
       scope.$apply(function() { 
        scope.fileread = changeEvent.target.files[0]; 
        // or all selected files: 
        // scope.fileread = changeEvent.target.files; 
       }); 
      }); 
     } 
    } 
}]); 

Answer 1

問題の一部は、directiということですveは隔離スコープとの双方向のバインディング=を使用します。分離スコープから親スコープにデータを転送するにはダイジェストサイクルが必要です。

一つのアプローチは、結合式&を使用して、ローカルファイルとして公開することである：上記の例で

<div layout-gt-sm="row" style="margin-bottom: 20px;"> 
    <input type="file" name="profilePic" fileread="profilePic = $file"> 
</div> 

app.directive("fileread", function() { 
    return { 
     scope: { 
      //fileread: "=" 
      fileread: "&" 
     }, 
     link: function (scope, element, attributes) { 
      element.bind("change", function (changeEvent) { 
       scope.$apply(function() { 
       var file = changeEvent.target.files[0]; 
       scope.fileread({$file: file}); 
       scope.$apply() 
      }); 
     } 
    } 
}); 

を変更イベントが発生した場合、命令は、定義された角度の発現を評価しますfileread属性で、ファイルは$fileとして公開されます。 $fileの値は、分離スコープから親スコープに値を転送するウォッチャー（およびダイジェストサイクル）を必要とせずに、親スコープですぐに使用できます。

もう1つの問題は、reader.onloadイベントがAngularJSフレームワーク外で発生し、スコープの変更を処理するために$scope.$apply()が必要であることです。詳細については、SO: FileReader onload only works the second time around in browsersを参照してください。