javascript - 如何在 Angular js 中单击时调用自定义指令进行文件上传？

Question

我在这里看到了很多在 Angular JS 中上传文件的解决方案。他们中的大多数人安装额外的模块(如 ngUpload、angular-file-upload)或创建上传完成后立即调用的自定义指令。

自定义指令方式正在工作，我正在上传以获取上传文件的 Hook 。但我希望仅在单击按钮后才开始上传。所以我尝试在单击时调用该指令，但无法读取指令中的文件输入。

我正在使用的自定义指令:

app.directive('fdInput', [function () {
return {
    template: '<div></div>',
    replace: true,
    link: function (scope, element, attrs) {
        element.on('change', function  (evt) {
            var files = evt.target.files;
            console.log(files[0].name);
            console.log(files[0].size);
            scope.callbackFn({file :  sfiles[0]});
        });
   }
};
}]);

点击时的自定义指令代码:

app.directive('fdInput', [function () {
return {
    template: '<div></div>',
    replace: true,
    link: function (scope, element, attrs) {
         scope.processFile= function() {
             console.log('inside processFile method');
         };
   }
};
}]);

有没有一种方法可以像我在第一个代码中那样读取第二个代码中的文件？

我想在 Angular 中单击即可实现文件上传，而不包含其他模块。如有任何帮助，我们将不胜感激。

Answer 1

您应该能够通过访问指令中的 Controller 范围来实现此目的。

这个link这里关于指令范围提供了一些非常好的入门示例。

希望有帮助!