簡體   English   中英

ng-repeat中的AngularJS圖像預覽,可能是范圍問題

[英]AngularJS image preview inside ng-repeat, probably a scope issue

我發現了這個問題並將其稍作更改,只要我在ng-repeat之外使用它,它似乎就可以正常工作。

但是由於某種原因我無法使它正常工作,因此image.src從未更新。 我想這比實際的預覽功能更多地是范圍問題。 我可以看到console.log(attr.imageData); 插件的第13行顯示了控制台中的字符串image 這應該是我認為的循環對象。

那么,選擇文件后如何獲得預覽圖像?

柱塞鏈接。

HTML:

<div ng-repeat="image in data.CmsPageImages">
    <a href="" ng-click="removeImage($index)" class="pull-right">
        <i class="fa fa-times"></i>
    </a>
    <input
        image-callback="test1"
        type="file"
        wa-file-select
        ng-model="image.file">
    <input
        type="text"
        required
        placeholder="Caption and copyright"
        ng-model="image.caption">
    <img ng-if="image.src" ng-src="image.src" style="width: 120px; height: auto;" />
</div>

整個JS代碼:

angular.module('waFrontend', []);

angular.module('waFrontend').directive('waFileSelect', ['fileReader', function (fileReader) {
    return {
      require: '^ngModel',
      scope: {
        imageData: '='
      },
        link: function ($scope, el, attr) {
            el.bind('change', function(e) {
              var file = ((e.srcElement || e.target).files[0]);
          fileReader.readAsDataUrl(file, $scope).then(function (result) {
                attr.imageData.src = result;
            });
            })
        }
    }
}]);

angular.module('waFrontend').controller('SubmitNewsController', [
    '$scope', 'fileReader',
    function ($scope, fileReader) {

    $scope.data = {
        CmsPage: {
            title: ''
        },
        CmsPageImages: [
            {
                caption: '',
                file: null
            }
        ]
    };

    $scope.addImage = function() {
        $scope.data.CmsPageImages.push({
            caption: null,
            file: null
        });
    };

    $scope.removeImage = function(index) {
        $scope.data.CmsPageImages.splice(index, 1);
    };

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

}]);

(function (module) {

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

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

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

        var onProgress = function (reader, scope) {
            return function (event) {
                scope.$broadcast("fileProgress",
                        {
                            total: event.total,
                            loaded: event.loaded
                        });
            };
        };

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

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

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

            return deferred.promise;
        };

        return {
            readAsDataUrl: readAsDataURL
        };
    };

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

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

console.log(attr.imageData)將只顯示您要放入其中的attr字符串,以查看確切的圖像對象,應使用$scope.$eval(attr.imageData)

您也忘記將imageData參數添加到指令中:

<input
    image-callback="test1"
    image-data="image"
    type="file"
    wa-file-select
    ng-model="image.file">

或從指令范圍初始化中刪除它,否則可能會導致錯誤。

attr.imageData.src = result; -那是行不通的。 請改用$scope.imageData.src = result

似乎您的指令中不需要ng-model="image.file" ,並且require: '^ngModel'也應刪除,但是如果您有進一步的需求,請保留它。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM