AngularJSファイル入力時の簡単な画像プレビュー

Question

このコードが機能しない理由を教えてもらえますか？ この私のプレビュー領域：

<div class="preview"><img src="" alt=""></div>

と、この私のinput：

<input type="file" file-input>

と私の指示コードは、次のとおりです。私はinputに画像を挿入すると、画像を利用したいと思い

var cmos = angular.module('cmos', ['simditor']); 
    // controller 
    cmos.controller('cmosCtrl', function($scope){} 
    // directive 
    cmos.directive("fileInput", function($parse){ 
      return{ 
       link: function($scope, element, attrs){ 
        element.on('change', function(event){ 
         var files = event.target.files;    

         var reader = new FileReader(); 

         var img = document.querySelector(".preview > img"); 
         reader.addEventListener("load", function(){ 
          img.src = reader.result; 
         }, false); 

         if(files){ 
          reader.readAsDataURL(files[0]);     
         } 
         // console.log(files[0]); 
        }); 
       } 
      } 
    }); 

をし、プレビューエリアに表示します。

Answer 1

あなたは次のように$スコープを使用することができます。..

<div class="preview"><img src="{{imageUrl}}" alt=""></div> 

とJSで。

var files = event.target.files; 
        var reader = new FileReader(); 

        reader.addEventListener("load", function(){ 
         $scope.imageUrl = reader.result; 
        }, false); 

        if(files){ 
         reader.readAsDataURL(files[0]);     
        }