角度$スコープがファイル入力タイプと競合しています

Question

私はanglejを使用してファイルをバイト配列に変換しようとしていました。そのうまく動作し、バイトコードとファイル名を配列（$ scope.FileAttachments）に追加し、$ scope.FileAttachmentsに追加されると、クライアント側でng-repeatedが添付ファイルを表示します。ファイルの変換が完了し、$ scope.FileAttachmentsに追加されたファイルも終了しましたが、ng-repeatは適時に動作しません。興味深い問題は、ビュー内で他のイベントが発生したときに、うまく動作することです。

HTMLコード

<input id="File1" ng-model="File1" onchange="angular.element(this).scope().file1Upload()" type="file" /> 

<table class="table table-striped table-bordered table-list"> 
    <thead> 
     <tr> 
      <th>Name</th> 
     </tr> 
    </thead> 
    <tbody id="tblAttachments"> 
     <tr ng-repeat="item in FileAttachments track by $index"> 
      <td>{{item.AttachmentDescription}}</td> 
      </tr> 
    </tbody> 
</table> 

AngularJSコントローラのコード

$scope.FileAttachments = []; 
var fileData; 

function getBuffer(resolve) { 
    var reader = new FileReader(); 
    reader.readAsArrayBuffer(fileData); 
    reader.onload = function() { 
      var arrayBuffer = reader.result 
      var bytes = new Uint8Array(arrayBuffer); 
      resolve(bytes); 
    } 
} 


$scope.file1Upload=function() { 
    var files = document.getElementById("File1").files; 
    fileData = new Blob([files[0]]); 
    var promise = new Promise(getBuffer); 
    promise.then(function (data) { 
      $scope.FileAttachments.push({ 
       "AttachmentDescription": files[0].name.toString(), 
       "FileValue": data.toString() 
      }); 
    }).catch(function (err) { 
      console.log('Error: ', err); 
    }); 
} 

Answer 1

はい、それを得た、$スコープを使用する必要があります。$（適用）するとき、あなたのコントローラの範囲外。

$scope.file1Upload=function() { 
     var files = document.getElementById("File1").files; 
     fileData = new Blob([files[0]]); 
     var promise = new Promise(getBuffer); 
     promise.then(function (data) { 
      $scope.$apply(function() { 
       $scope.FileAttachments.push({ 
        "AttachmentDescription": files[0].name.toString() 
        "FileValue": data.toString() 
       }); 
      }); 
     }).catch(function (err) { 
      console.log('Error: ', err); 
     }); 
}