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

Question

在一个html体中,我有两个模板,一个用于标题,另一个用于模板.头模板有一个save and download按钮,它应该使用ngTable导出将ngTable数据导出到csv文件,该导出位于contents.html模板文件中,但是这个导出仅在我使用单击处理程序放置一个锚标记以便导出时模板.

content.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>

header.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下载为文件的原因.

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

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

但是,因为您希望按钮和表来自不同的模板文件,所以它们可能绑定到不同的子范围.一个快速的解决方法是告诉export指令在作用域中存在的对象上创建csv帮助器$parent:

<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