角預覽圖像 - 不能設置的不確定

Question

屬性「照片」上的預覽圖像的代碼工作，但可以把它由於某些問題

視圖不理清：

<img ng-src="{[vm.photo]}"/> 
<input type="file" on-add-image="uploadFile"/> 

指令：

.directive('onAddImage', function() { 
     return { 
     restrict: 'A', 
     link: function (scope, element, attrs) { 
      var onImgChange = scope.$eval(attrs.onAddImage); 
      element.bind('change', onImgChange); 
     } 
     }; 
    }); 

控制器：

var vm = this; 

    $scope.uploadFile = function() { 

     dietImage = event.target.files[0]; 
     var reader = new FileReader(); 

     reader.onload = function(event) { 
      vm.photo = event.target.result 
      $scope.$apply() 
     } 

     reader.readAsDataURL(event.target.files[0]); 
    }; 

錯誤消息：「Uncaught TypeError：無法設置屬性'照片'未定義在FileReader.reader.onload」

Answer 1

我認爲你的問題可能是ControllerAs語法..因爲我不明白你如何綁定你的虛擬機控制器HTML ...的

嘗試類似：

<div ng-controller="MyController as vm"> 
<img ng-src="{[vm.photo]}"/> 
<input type="file" on-add-image="uploadFile"/> 
</div> 

或更好的把你的路由文件（app.config）中的controllerAs: 'vm'