将数据追加到指令元素

Question

构建一个数据表，其中有两个主要功能

1. 对数据表排序
2. 将排序表中可查看的内容下载到CSV中

到目前为止，能够对表进行排序，并可以使用jQuery下载CSV。然而，使用jQuery并不是角度的方式，所以需要使用纯JS的能力。

指令"exportToCsv"

angular.module('myApp')
  .directive('exportToCsv', function(){
    return {
      restrict: 'A',
      link: function (scope, element, attrs) {
        var el = element[0];
        element.bind('click', function(e){
            var table = e.target.nextElementSibling;
            var csvString = '';
            for(var i=0; i<table.rows.length;i++){
                var rowData = table.rows[i].cells;
                for(var j=0; j<rowData.length;j++){
                    csvString = csvString + rowData[j].innerHTML + ",";
                }
                csvString = csvString.substring(0,csvString.length - 1);
                csvString = csvString + "\n";
            }
            csvString = csvString.substring(0, csvString.length - 1);
         // USING JQUERY ABLE TO DOWNLOAD THE CSV
         var csvExport = $('<a/>', {
                href:'data:application/octet-stream;base64,'+btoa(csvString),
                download:'report.csv'
          }).appendTo('body');
          console.log('variable jqueryExport', csvExport);
            csvExport[0].click();
            csvExport.remove();

        // UNABLE TO DOWNLOAD CSV USING ANGULAR ONLY
        var csvExport = ('<a/>',{
             href:'data:application/octet-stream;base64,'+btoa(csvString),
             download:'report.csv'
         });
        // Seems like all the answers want to append to HTML rather than it's own node
        element.append('csvExport');
    }
  };
});

...
<button export-to-csv>Download</button>
<table>...</table>
...

如何将csvExport附加到它的元素中，下载，然后删除它？

Answer 1

我可能会使用一个动态吴瑞夫，它将自己设置为csv的值。

类似于：

<table id="data-to-download">...</table>
<a ng-href="{{ dataUri('#data-to-download') }}" download="report.csv">Download</a>

然后，像上面那样实现dataUri，使用传入的选择器('#data-to-download')。

Answer 2

能够将下载链接附加到指令元素。

角向

var csvExport = angular.element('<a/>');
csvExport.css({display: 'none'});
angular.element(document.body).append(csv);

csvExport.attr({
  href: 'data:application/octet-stream;base64,'+btoa(csvString),
  target: '_blank',
  download: 'report.csv'
})[0].click();