2013-05-19 15 views
5

ファイルを選択して角度jsでロードしたいと思います。Angular JSのsrc変更後に画像をリフレッシュする方法

すべてうまく動作しますが、唯一の問題は画像に反映されません。私は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); 
      }; 

    } 

答えて

11

手動onLoad機能で$scope.imageSourceを更新したときに角度がときを推測することはできませんので、あなたは、Scope.$applyを呼び出す必要がありますあなたはこの変更を行います。

関連する問題