Javascript AngularJS图像预览内部ng repeat，可能是范围问题

我发现并更改了它一点，只要我在

ng repeat

之外使用它，它似乎工作得很好

但由于某种原因，在我的repeat中，

image.src

从未更新过。我想这更多的是一个范围问题，而不是实际的预览功能。我可以看到

console.log（attr.imageData）向我显示控制台中的字符串
图像
。我想这应该是循环中的对象

那么，在我选择了一个文件之后，如何获得预览图像呢


HTML:

console.log（attr.imageData）
将只显示您放入其中的attr字符串，以便准确查看您应该使用的图像对象
$scope.$eval（attr.imageData）

此外，您忘记将imageData param添加到指令中：

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



或者从指令范围初始化中删除它，因为它可能导致错误

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

而且您的指令中似乎不需要
ng model=“image.file”
，而且
require:“^ngModel”
也应该删除，但如果您有进一步的需要，请保留它。
谢谢，是的，我在plunk中忘记了imageData参数。我的主要问题是范围部分。你能解释一下这是怎么回事吗？正如我现在所理解的，in link（）attr包含“原始”属性，而scope（此时已存在）包含解析/计算的属性？我没有意识到这一点，所以attrs参数是一个只包含标记元素属性及其值的对象，更像是用jquery attr方法获取它们时得到的。如果直接在指令初始化的范围对象中提供属性名称，则可以对属性进行求值。而且这个范围对于指令来说是局部的，这意味着你们可以访问和修改任何传递到这个范围的变量。评估的attr param只能被读取或手动分配给指令作用域中的另一个局部变量，因为它在父作用域中保持不变（作用域的行为类似于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")));

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