Question

我发现这个指令用于读取文件。它工作得很好，但我想了解它是如何工作的。一旦我有了一个很好的理解，我想在这个指令中设置一个元素背景图像到现在的BASE64图像。任何帮助都会很棒。

.directive("fileread", [function () {
    return {
        scope: {
            fileread: "="
        },
        link: function (scope, element, attributes) {
            element.bind("change", function (changeEvent) {
                var reader = new FileReader();
                reader.onload = function (loadEvent) {
                    scope.$apply(function () {
                        scope.fileread = loadEvent.target.result;
                    });
                }
                reader.readAsDataURL(changeEvent.target.files[0]);
            });
        }
    }
}]);

Answer 1

此指令使用大多数现代浏览器中的新FileReader API。此API允许浏览器使用输入类型=文件控件选择的文件可供JavaScript处理。简而言之，您初始化阅读器，在文件加载后为其提供运行功能，然后告诉它加载文件。您可以使用JavaScript直接将此绑定到输入，也可以通过这样的指令将其绑定到输入。该指令调用$ scope。$ apply，因为它使用了element.bind，它没有将动作链接到$ scope。

理解Angular指令

1 个答案: