0

我是 AngularJS 的新手，这是我第一次尝试创建自定义指令。我发现用于下载文件的同一段代码在多个地方使用，因此我想创建一个指令来提高模块化。这是我的第一次尝试。

angular.module('defaultModule')
.directive('downloadFile', function () {
    return {
        restrict: 'A',
        
        scope: true,
        //scope: {
        //    fileURL: '@',
        //    fileName: '@',
        //},

        link: function (scope, element, attrs) {

            function startDownload() {
                console.log('scope.fileURL', 'scope.fileName'); // gives undefined values in isolated scope
                const link = document.createElement('a');
                link.setAttribute('target', '_blank');
                link.setAttribute('href', scope.fileURL);
                link.setAttribute('download', scope.fileName);
                document.body.appendChild(link);
                link.click();
                link.remove();
                console.log("download completed!");
            }

            element.on('click', startDownload);
        }
        
    };
});

我在我的html代码中像这样使用它

 <!-- {{fileURL}} and {{fileName}} are defined -->
 <button download-file type="button">Download</button>

关于这个实现，我有几个问题：

  • 正如您现在所看到的，我目前正在使用继承范围并且它工作正常，我尝试切换到隔离范围（在范围下方注释掉），因为我听说这是最佳实践。但是，当我使用隔离范围时，似乎 fileURL 和 fileName 都有未定义的值。我不知道在我的链接函数中调用它们的正确方法。
  • 对于链接功能，我研究了元素和属性指的是什么，但大多数示例都是针对限制为“E”的指令。如果我只想将该指令用作属性，那么 element 是否指的是使用该指令的标签，在这种情况下 attrs 会是什么？
  • 在关注点分离方面，这个链接函数写得好吗？它解决了这个问题，但它确实试图操纵 DOM 而不仅仅是设置它。如果我使用控制器会更好吗？

提前谢谢了！

4

0 回答 0