AngularJS对文件输入的简单图像预览

Question

有人能告诉我为什么这段代码不起作用吗？ 这是我的预览区域：

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

这我input：

<input type="file" file-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]); 
        }); 
       } 
      } 
    }); 

当我插上input图像想借图像和显示它预览区域。

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]);     
        }