AngularJS 从指令中以编程方式触发定位标记上的点击事件

Question

我创建了一个下载音频文件的指令。单击指令标签时，我从服务器获取 base64 编码数据并将锚标签（这是指令的模板）的 '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
  };
}

Answer 1

我还是不确定，但如果我更换 angular.element(element).find('a').triggerHandler('click'); 与 angular.element(element).find('a')[0].click(); 有效。

更新：如果 href 不是 present.So，triggerHandler('click') 不起作用，如果我将默认值设置为 scope.dataURL = '#'，上面的代码将起作用。

AngularJS 从指令中以编程方式触发定位标记上的点击事件

AngularJS trigger click event programmatically on anchor tag from within directive

events

directive

click

angularjs

programmatically