Wie ein Bild nach src Änderung in Angular JS aktualisieren

Question

Ich möchte eine Datei auswählen und laden Sie es in eckigen js.

Alles funktioniert gut, das einzige Problem, das Bild nicht refrech. Ich kann sehen, dass alles funktioniert, denn wenn ich das On-Menü auf meiner Seite mit angular.js umschalte, ist das Bild erfrischend.

Hier ist mein Code:

<div ng-controller="TopMenuCtrl"> 
     <button class="btn" ng-click="isCollapsed = !isCollapsed">Toggle collapse</button> 
     <input ng-model="photo" 
      onchange="angular.element(this).scope().file_changed(this)" 
      type="file" accept="image/*" multiple /> 
      <output id="list"></output> 
      <img ng-src="{{imageSource}}"> 
    </div> 

und die Winkel js Skript:

$scope.file_changed = function(element) { 
      var files = element.files; // FileList object 
      // Loop through the FileList and render image files as thumbnails. 
      for (var i = 0, photofile; photofile = files[i]; i++) { 

      // var photofile = element.files[0]; 
       var reader = new FileReader(); 
       reader.onload = (function(theFile) { 
        return function(e) { 

        $scope.imageSource= e.target.result; 

        }; 
        })(photofile); 

       reader.readAsDataURL(photofile); 
      }; 

    } 

Answer 1

Sie müssen Scope.$apply anrufen, wenn Sie manuell $scope.imageSource in der onLoad Funktion aktualisieren, da Angular nicht, wenn erraten Du machst diese Veränderung.