angularjs - AngularJSは、ディレクティブ内からアンカータグでプログラムでクリックイベントをトリガーします

Question

オーディオ ファイルをダウンロードするディレクティブを作成しました。ディレクティブ タグをクリックすると、base64 でエンコードされたデータをサーバーから取得し、アンカー タグ (これはディレクティブのテンプレート) の「href」属性を取得したデータに設定します。次に、プログラムで「a」タグをクリックして、ファイルのダウンロードポップアップをユーザーに表示できるようにしようとしています。ここでの問題は、「クリック」イベントがトリガーされたときに何もしないが、2 回目に手動でクリックすると機能することです。

フィドル コードを埋め込みました。どんな助けでも本当に感謝しています。以下は、ディレクティブ コードです。

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
  };
}