我创建了一个指令来下载音频文件。单击指令标记后,我将从服务器获取 Base64 编码数据,并将 anchor 标记的“href”属性(这是指令的模板)设置为获取的数据。然后我尝试以编程方式单击“a”标签,以便可以向用户显示文件下载弹出窗口。这里的问题是,当触发“click”事件时,它不会执行任何操作,但是当第二次手动单击时,它会起作用。
我已经嵌入了 fiddle code 。非常感谢任何帮助。 下面是指令代码:
angular.module('myTestApp', [])
.directive('webDownloader', downloadFn);
downloadFn.$inject = ['$timeout'];
function downloadFn($timeout) {
function downloadLinkFn(scope, element) {
scope.fileName = scope.fileName || 'test-file';
scope.populateData = function() {
if (scope.dataURL) {
} else {
scope.webProvider()
.then(function (response) {
scope.dataURL =
'data:audio/ogg;base64,' + response;
$timeout(function() {
angular.element(element).
find('a').triggerHandler('click');
}, 0);
});
}
};
// Return the object.
return {
template: '<a data-ng-href="{{dataURL}}" download="{{fileName}}" data-ng-click="populateData()" data-ng-transclude></a>',
transclude: true,
restrict: 'A',
scope: {
fileName: '@',
webProvider: '&'
},
link: downloadLinkFn
};
}
最佳答案
我仍然不确定,但如果我更换
angular.element(element).find('a').triggerHandler('click');
与
angular.element(element).find('a')[0].click();
它有效。
更新:
如果 href
不存在,则 triggerHandler('click')
不起作用。因此,如果我将默认值设置为 scope.dataURL = '#'
,上面的代码可以工作。
关于AngularJS 在指令内以编程方式触发 anchor 标记上的单击事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39972519/