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