Come attivare l'esportazione in csv per i dati di una tabella da un modello diverso in angularjs?

Question

In un corpo HTML ho 2 modelli uno per l'intestazione e altro per il modello. Il modello di intestazione dispone di un pulsante save and download che deve esportare un dato ngTable in un file csv using ngTable Export, che si trova all'interno di un file modello content.html, ma questa esportazione funziona solo quando inserisco un tag di ancoraggio con gestore di clic per esportarlo nello stesso modello .

content.html (modello 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 (modello 2)

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

Ti prego, aiutami a esportare i contenuti della tabella di CSV con un pulsante su un modello separato.

Aggiornamento

Unfinished plunker link.. export not working somehow in plunker

Answer 1

Il tag di ancoraggio nel vostro plunkr manca ng-href="{{ csv.link() }}, che è ciò che fa sì che il browser per scaricare il CSV come file.

Se è necessario utilizzare un pulsante al posto di un tag di ancoraggio, è possibile simulate href con una funzione che chiama csv.generate, e quindi imposta location.href al valore restituito da csv.link():

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

Ma, perché si vuole il il pulsante e la tabella provengono da diversi file di modelli, probabilmente sono associati a different child scopes. Una soluzione rapida per questo è quello di raccontare la direttiva esportazione create the csv helper su un oggetto che esiste nella $parent campo di applicazione:

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

poi cambiare il controller a:

$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(); 
}; 

Ecco una demo di lavoro: http://plnkr.co/edit/a05yJZC1pkwggFUxWuEM?p=preview