Question

我不知道JS是什么，但我有精神障碍。我为这个愚蠢的问题道歉，但我不知所措，因为无论我读了多少，我都无法将学者付诸实践。特别是在嵌套函数方面。

我有一个控制器，让我们说FileCtrl。在其中我有以下内容，通过指令侦听添加到输入字段的文件。我试图注入名为fileReader的Angular JS工厂服务服务（HTML5 FileReader的队列服务）。

但是，我一直在fileReader上收到一个未定义的错误。我知道为什么因为它无法看到fileReader，而是将它注入$ scope。$ on，然后再注册$ scope。$ apply不起作用。另外，在$ scope结尾处添加fileReader作为闭包。$ on也不起作用。

我应该补充一点，我可以看到args.file，如果我删除了fileReader代码，它会推送文件没问题，但我没有缩略图。所以我的工作，只是不使用fileReader，这是因为我做了注射错误。

旁注，我在下面的Vals评论中使用apply，因为我发现没有它的图像渲染同步问题适用于较小的图像，但是对于较大的图像，它会冻结，这就是为什么我试图创建和使用$ q fileReader服务。我想另一种解决方法是在数组条目上创建一个监视/指令，当img回来时，64编码字符串填充html元素...就像我说的JS心理块：）

myApp.controller('FileController', ['$scope', 'FileReaderService',  function($scope, FileReaderService  ){  
    $scope.$on("fileSelected", function (event, args) {
        $scope.$apply(function () {
            $scope.progress = 0;
            fileReader.readAsDataUrl(args.file, $scope)
            .then(function(result) {
                $scope.imageSrc = result;
            });
            $scope.files.push(args.file);
        });
    });
});

Answer 1

在AngularJS中，并非所有函数都由依赖注入处理。在控制器，指令中（在指令和控制器的定义中，而不是链接或编译），Servicies AngularJS注入请求的实例，但在一些其他函数（如事件监听器）中，参数按位置传递。

在您的情况下，您需要将fileReader放入控制器的定义中，而不是放在事件监听器上。

您还需要删除apply，因为通过$on添加的事件侦听器都包含在摘要循环中。

Answer 2

感谢大家的回复。你让我回去再做一点研究，我找到了一点调试的答案。我不确定为什么会这样理解，但我有一个想法。

如果您的工厂服务中出现错误，在我的情况下，FileReaderService angular在引导服务时不会一直爆炸，只会在您调用服务时爆炸，这样才有意义。如果服务出现问题，整个服务将无法启动。此外，将其注入控制器时，您不会收到任何错误消息。我不得不在模块上放一块手表，注意到有一个参考错误。我发现我的功能缺失了。
我的结局纯粹缺乏经验，但我一直试图从$ q服务中捕获结果，这样做很好，但后来试图注入$ q返回之外，即我试图捕获$ scope.imageSrc = result并将其插入.then，因为你有同步问题，它不起作用。我可以看到$ scope.files中的值，但它不会是console.log或以HTML格式显示。所以我把所有的文件操作都移到了.then，它运行得很好。当你想到它时逻辑:)如果你不打算使用它，为什么还有$ q ...大声笑。

//问题代码

fileReader.readAsDataUrl(args.file, $scope)
.then(function(result) {
    $scope.imageSrc = result;
});
// cannot and should not try to work the results outside the return promise 
$scope.files.imgSource = $scope.imageSrc;
$scope.files.push(args.file);

//固定和工作代码

myApp.controller('FileController', ['$scope', 'FileReaderService',  function($scope, FileReaderService  ){ 
    var reader;
    $scope.files = [];

    //listen for the file selected event
    $scope.$on("fileSelected", function (event, args) {
        $scope.progress = 0;
        var file = args.file;
        FileReaderService.readAsDataUrl(file, $scope)
            .then(function(result) {
                file.imgSource = result;
                $scope.files.push(file);
            });
    });
});

Javascript \ Angular函数帮助 - 心理块

2 个答案: