在一个html体中,我有2个模板,一个用于标题,另一个用于模板.标题模板有一个保存和下载按钮,它应该将ngTable数据导出到一个csv文件
using ngTable Export,该文件位于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.
更新
Unfinished plunker link.. export not working somehow in plunker
你的plunkr中的锚标签缺少ng-href =“{{csv.link()}},这是导致浏览器将csv下载为文件的原因.
如果必须使用按钮而不是锚标记,则可以使用调用csv.generate的函数simulate href,然后将location.href设置为csv.link()返回的值：
$scope.exportFile = function($event,fileName) {
$scope.csv.generate($event,"report.csv");
location.href=$scope.csv.link();
};
但是,因为您希望按钮和表来自不同的模板文件,它们可能被绑定到different child scopes.一个快速的解决方法是将导出指令告诉@L_403_4@对$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
