AngularJS Предварительный просмотр изображения перед загрузкой с отображением предыдущего изображения

Question

myApp.directive('fileModel', ['$parse', function($parse) { 
    return { 
     restrict: 'A', 
     link: function($scope, element, attrs) { 
    var model = $parse(attrs.fileModel); 
    var modelSetter = model.assign; 
    element.bind('change', function(e) { 
     $scope.$apply(function(e) { 
     modelSetter($scope, element[0].files[0]); 
     }); 
     $scope.setimage(); 
    }); 
    } 

Приведенный выше код является моей директивой.

В функции $ scope.setimage()

 $scope.setimage = function() { 
    var file = $scope.myFile; 
    var reader = new FileReader(); 
    reader.readAsDataURL(file); 
    reader.onload = function(e) { 
    $scope.ImageSrc = e.target.result; 
    } 
} 

Всякий раз, когда я выбираю файл,

<img width= 250 height=350 ng-src="{{ImageSrc}}"/> 
    <input type=`enter code here`"file" file-model="myFile"/> 

Сразу предварительного просмотра не отображается. Когда я выбираю второй раз, появляется предварительный просмотр для ранее выбранного файла изображения. Не уверен, что не так.

Answer 1

Вместо element.bind('change', ..., вы можете использовать $scope.$watch на Myfile, например, так:

$scope.$watch('$scope.myFile', function(e) { 
    $scope.$apply(function(e) { 
    modelSetter($scope, element[0].files[0]); 
    }); 
    $scope.setimage(); 
}); 

Обратите внимание, что $scope.myFile должен быть определен для того чтобы это произошло, так что если он не определен в директиве вам нужно добавьте это вместо своего контроллера.

Answer 2

Я добавил $ scope. $ Apply для назначения imagesrc, и изображение обновляется немедленно.

$scope.setimage = function() { 
    var file = $scope.myFile; 
    var reader = new FileReader(); 
    reader.readAsDataURL(file); 
    reader.onload = function(e) { 
    $scope.$apply(function(){ 
     $scope.ImageSrc = e.target.result; 
    }); } 
    }