更新图像上的输入src更改angularjs

Question

我试图显示一张照片，当有人选择它的输入。现在我可能会过度简单地使用angularjs，但我希望这个代码能够工作。

<div ng-app="app"> 

    ... html stuff ... 

    <div ng-controller="imgCtrl"> 

    <input ng-model="imageSource" type="file"></input> 
    <img ng-src="{|imageSource|}"></img> 

    </div> 

    </div> end of app 

凡我angularjs文件如下

var app = angular.module('app',[]).config(function($interpolateProvider){ 
     $interpolateProvider.startSymbol('{|'); 
     $interpolateProvider.endSymbol('|}'); 
    } 
); 

var imgCtrl = function ($scope,$http){ 
    $scope.wall = _wall; 
}; 

clientDashboard.controller('imgCtrl',imgCtrl); 

不幸的是，什么也没发生，我不能看到我更新的形象。我真的必须为此编写锅炉代码吗？

Answer 1

我知道它在Chrome和Firefox中工作，但我的快速调查显示这是一个安全风险，甚至可能最终不允许。在这里看到：http://jsfiddle.net/28ZJw/

HTML：

<div ng-app="app"> 
    <div ng-controller="imgCtrl"> 
    <input ng-model="imageSource" type="file" onchange="angular.element(this).scope().fileNameChaged(this)"></input> 
    <img ng-src="{|imageSource|}"></img> 
    </div> 
</div> 

JS：

var app = angular.module('app',[]).config(function($interpolateProvider){ 
     $interpolateProvider.startSymbol('{|'); 
     $interpolateProvider.endSymbol('|}'); 
    } 
); 

app.controller('imgCtrl', function($scope, $http) 
{ 
    $scope.imageSource = ""; 
    $scope.fileNameChaged = function(element) 
    { 
     var reader = new FileReader(); 
     reader.onload = function(e) 
     { 
      $scope.$apply(function() 
      { 
       $scope.imageSource = e.target.result; 
      }); 
     } 
     reader.readAsDataURL(element.files[0]); 
    } 
}); 

正确的做法是让与ng-change这是怎么回事，但是我无法得到它的工作。我不确定ng-change是否适用于文件输入字段