Как обновить изображение после изменения src в Angular JS

Question

Я хотел бы выбрать файл и загрузить его в угловой js.

Все работает нормально, единственная проблема - изображение не refrech. Я вижу, что все работает, потому что, когда я переключаю меню на моей странице с помощью angular.js, изображение обновляется.

Вот мой код:

<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> 

и угловая сценарий расслоения плотного:

$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

Вы должны вызвать Scope.$apply, когда вы вручную обновить $scope.imageSource в функции onLoad, потому что Угловой не может угадать, когда вы делаете это изменение.