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")));

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

1 个答案: