更新圖像上的輸入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是否適用於文件輸入字段