Question

我正在尝试使用AngularJS编写文件读取器指令，该指令将接收图像，然后将其URL推入数组，以便我可以遍历该数组并将图像绘制到DOM中。

但是，我似乎无法从上传的图像中获取所需的URL，以便在图像源标记内调用它。这是我正在处理的事情：

fileReader指令

app.directive('fileReader', ['$rootScope', function($rootScope) {
    return {
        restrict: 'E',
        scope: true,
        templateUrl:'views/templates/file-reader.html',
        link: function (scope, element, attributes, controller) {
            element.bind("change", function(event) {
                var files = event.target.files;
                var reader = new FileReader();
                reader.onload = function() {
                    $rootScope.imageInfo = this.result;
                    $rootScope.$digest(); //digest is required to run with watch?
                    console.log("caught a change");
                };
                reader.readAsDataURL(files[0]);
            });
        },
        controller: 'UploadController'
    }    
}]);

UploadController

controllers.controller('UploadController', ['$scope', '$rootScope', function($scope, $rootScope){

    $scope.imageUrls = []; //array of URL

    $rootScope.$watch('imageInfo', function() {
        if ($rootScope.imageInfo) { //if something has been loaded
            console.log("Inside the rootScope watch function");
            $scope.imageUrls.push($rootScope.imageInfo); //add the URL to the array
        }
        $scope.printArray();//to check if the array worked
    });

    $scope.printArray = function(){
        console.log("this is the image URL array:");
        for(var i=0; i<$scope.imageUrls.length; i++){
            console.log($scope.imageUrls[i]);
        };
        console.log("end image url");
    };
}]);

file-reader.html ：<input type='file' id="files" name="files[]">

最初，我在onload块之外有reader.readAsDataURL(file[0])行，但它没有通过我通过阅读器提取的URL。不过这样，$ watch甚至没有被激活。为什么不呢？

如何使用它来帮助将图像的URL从上传传递到数组？

（这是所有客户端。我意识到我实际上并没有“上传”DOM之外的任何东西。）

更新：我已经通过简单地调用$ digest修复了$ watch没有被调用的问题，但我仍然无法抓住数据的URL来创建图像，而不是像data:image/gif;base64,R0lGODlh9QC0AOZ0AAwKClNNSpeWloeGhvTXozAqKbe2t0osEMm4r…1pGcsCIoJgiyf8+HPbIGY+OCEjIGhIBw8g8GDcnHgVKnCVCm7BAIooctEhiymDoBHBF4EAADs=

我重新安排了一些条款，并在指令中更新了上面的代码。

Answer 1

您是否尝试在$ watch函数中将objectEquality设置为true，如下所示：

  $rootScope.$watch('imageInfo', function() {
    if ($rootScope.imageInfo) { //if something has been loaded
        console.log("Inside the rootScope watch function");
        $scope.imageUrls.push($rootScope.imageInfo); //add the URL to the array
    }
    $scope.printArray();//to check if the array worked
}, true); // add true here

这也会监听嵌套值的变化

这里还有一篇文章/博客文章，我发现它提供了不同的$ watch机制的良好细分和性能。在决定使用哪个$ watch功能时可能会派上用场：

http://teropa.info/blog/2014/01/26/the-three-watch-depths-of-angularjs.html

通过Angular指令在DOM上上传和显示图像

1 个答案: