ng-csv doesn't work on dynamically created button

[anish-g-nair]

I was trying out ng-csv. And it worked fine for me.

But consider this scenario.

CASE 1

I have a button like this.

View(HTML) Code

where csvData and csvHeader are scope variables. I click the above tag and it exports the CSV. All good !!

CASE 2 But, consider the case where I dont have the csvData handy or ready. I need to dowload it from elsewhere: maybe an API call, or from the database.

So I changed my code to this,

View(HTML) Code

Now, when I click on it, it calls the getData() function, but doesn't wait for the data(or to set any scope variables), and downloads a 0byte CSV file.

So the thing is as soon as you click the html-tag(,

, , etc containing the ng-csv attribute), its starts the download.

CASE 3 To find a workaround I did this.

View(HTML) Code

getData() makes the necessary calls to get the data Once data is fetched, I create a button dynamically.

---

Controller Code jQuery('body').append('

hello world'); jQuery("body #gotCSV").attr("ng-csv", JSON.stringify(response)); jQuery("body #gotCSV").attr("ng-header", JSON.stringify($scope.csvHeader)); jQuery("body #gotCSV").attr("filename", 'transactions.csv');

jQuery("#gotCSV").click();

This didn't work for me. I tried inspecting the button from chrome browser, and I see the ng-csv, ng-header and filename set on it properly. Tried clicking the dynamically created button manually. That didn't work either.

CASE 4 To check if the dynamically created button(code) is faulty. I copy pasted the button code(dynamically created button), and pasted it in the view. And clickin on it downloaded the CSV

Have no clue, why the dynamically created button(or any other HTML tag) doesn't work for ng-csv

Please help !!!