如何在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> 

和角js腳本：

$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當你手動在onLoad功能更新$scope.imageSource，因爲角不能猜測時你做這個改變。