AngularJS - 将图像加载到文件输入上的 img 标签

Question

我有一个 img 标签和一个如下所示的输入文件：

<img ng-src="{{item.showImage || '//:0'}}"  />
<input type="file" accept="image/*" onchange="angular.element(this).scope().getImage(this.files)"/>

在控制器上我有以下功能：

$scope.getImage = function(files){
     $scope.item.image = files[0];
     var reader = new FileReader();
     reader.onload = function(e){
           $scope.item.showImage = e.target.result;
     }
     reader.readAdDataURL($scope.item.image);
}

我的目的是使用ng-src在img标签中显示用户选择的图片， 这只有在我调用 $scope.$apply() 时才有效，我想知道是否有办法让它在不调用它的情况下工作？

Answer 1

你可以看看这个plunker。您可以为图像字段使用指令，该指令将监视更改并以模板能够显示的方式返回图像。

var UploadController = function ($scope, fileReader) {
    $scope.getFile = function () {

        fileReader.readAsDataUrl($scope.file, $scope)
            .then(function(result) {
                $scope.imageSrc = result;
            });
    };
};

app.directive("ngFileSelect",function(){
  return {
    link: function($scope,el){

      el.bind("change", function(e){

        $scope.file = (e.srcElement || e.target).files[0];
        $scope.getFile();
      })
    }
  }
});

那么你也需要它作为服务：

(function (module) {

    var fileReader = function ($q, $log) {

        var onLoad = function(reader, deferred, scope) {
            return function () {
                scope.$apply(function () {
                    deferred.resolve(reader.result);
                });
            };
        };

        var getReader = function(deferred, scope) {
            var reader = new FileReader();
            reader.onerror = onError(reader, deferred, scope);
            return reader;
        };

        var readAsDataURL = function (file, scope) {
            var deferred = $q.defer();

            var reader = getReader(deferred, scope);         
            reader.readAsDataURL(file);

            return deferred.promise;
        };

        return {
            readAsDataUrl: readAsDataURL  
        };
    };

    module.factory("fileReader",
                   ["$q", "$log", fileReader]);

}(angular.module("plunker")));