Создание директивы загрузки AngularJS, которая может повторно использоваться в нескольких представлениях

Я новичок в 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, а не просто настраивать его. Было бы лучше, если бы я использовал вместо этого контроллер?

Спасибо заранее!

0 ответов

Другие вопросы по тегам