如何在 angularjs 中触发从不同模板的表数据导出到 csv

Question

在 html 正文中，我有 2 个模板，一个用于标题，另一个用于模板。标题模板有一个save and download按钮，该按钮应该使用 ngTable 导出将 ngTable 数据导出到 csv 文件，该导出位于内容.html模板文件中，但此导出仅在我放置带有单击处理程序的锚标记以导出到同一模板中时才有效。

内容.html（模板 1）

<a class="btn btn-default export-btn" ng-click='csv.generate($event, "report.csv")' href=''>Export</a> <!-- this works -->
<table ng-table="tableParams" show-filter="true" class="table" export-csv="csv">
        <tr ng-repeat="item in $data" height="10px" class="animate" ng-animate="{enter: 'animate-enter', leave: 'animate-leave'}">
            <td data-title="'Date'" align="center" filter="{ 'date': 'text' }" sortable="'date'">{{ item.date | date: 'd MMM yyyy' }}</td>
            <td data-title="'Label'" align="center" filter="{ 'label': 'text' }" sortable="'label'">{{item.label}}</td>         
            <td data-title="'Count'" align="center" filter="{ 'count': 'text' }" sortable="'count'">{{item.count}}</td>
        </tr>
</table>

标头.html（模板 2）

<button class="save-button" ng-click='csv.generate($event, "report.csv")'></button> <!-- does not work-->

请帮助我使用单独模板上的按钮将表格内容导出为 csv。

更新

未完成的 plunker 链接.. 导出在 plunker 中无法正常工作

Answer 1

plunkr 中的锚标记缺少ng-href="{{ csv.link() }} ，这就是导致浏览器将 csv 下载为文件的原因。

如果必须使用按钮而不是锚标记，则可以使用调用 csv.generate 的函数模拟href，然后将location.href设置为 csv.link() 返回的值：

$scope.exportFile = function($event, fileName) {
  $scope.csv.generate($event, "report.csv");
  location.href=$scope.csv.link();
};

但是，由于您希望按钮和表来自不同的模板文件，因此它们可能绑定到不同的子作用域。 解决此问题的快速解决方法是告诉 export 指令在$parent作用域中存在的对象上创建csv帮助程序：

<table ng-table="tableParams" export-csv="helper.csv">

然后将控制器更改为：

$scope.helper = {
  csv: null //will be replaced by the export directive
};
$scope.exportFile = function($event, fileName) {
  $scope.helper.csv.generate($event, "report.csv");
  location.href=$scope.helper.csv.link();
};

这是一个工作演示：http://plnkr.co/edit/a05yJZC1pkwggFUxWuEM?p=preview