Passing ID as parameter into Custom Directive AngualrJS

Question

I am using this directive that exports html table to csv:

   myApp.directive('exportToCsv', function () {
        return {
            restrict: 'A',

            link: function (scope, element, attrs) {

                function stringify(str) {
                    return '"' + str.replace(/^\s\s*/, '').replace(/\s*\s$/, '').replace(/"/g, '""') + '"';
                }

                element.bind('click', function (e) {


                    var table = document.querySelector("#targetTable");

                    /* var table = e.target.nextElementSibling;*/

                    var csvString = '';
                    for (var i = 0; i < table.rows.length; i++) {

                        var rowData = table.rows[i].cells;
                        for (var j = 1; j < rowData.length; j++) {
                            if (rowData[j].innerHTML.indexOf('<a href') > -1) {
                                var ele = angular.element(rowData[j]);
                                for (var k = 0; k < ele[0].childNodes.length; k++) {
                                    if (ele[0].childNodes[k].tagName == 'A') {
                                        csvString = csvString + stringify(ele[0].childNodes[k].innerText) + ",";
                                    }
                                }
                            } else if (rowData[j].innerHTML.indexOf('<em') > -1 || rowData[j].innerHTML.indexOf('<strong>') > -1) {
                                var ele = angular.element(rowData[j]);
                                csvString = csvString + stringify(ele[0].textContent) + ",";
                            } else {
                                csvString = csvString + stringify(rowData[j].innerHTML) + ",";
                            }
                        }
                        csvString = csvString.substring(0, csvString.length - 1);
                        csvString = csvString + "\n";
                    }
                    console.log(csvString);
                    csvString = csvString.substring(0, csvString.length - 1);

                    var dl = new Blob([csvString], { type: 'application/csv;base64' });

                    saveAs(dl, "export.csv")

                });
            }
        }
    });

What's really bothering me in this code is the " var table = document.querySelector("#targetTable");" since it won't allow me to reuse the directive twice on the same html view.

I am trying to figure how to pass the target id as a parameter into the directive function, so I can use it in markup like this:

   <button export-to-csv  type="button" id-parameter="targetTable1"  style="background-color: Transparent; color:green">Export:CSV</button >

 <button export-to-csv  type="button" id-parameter="targetTable2"  style="background-color: Transparent; color:green">Export:CSV</button >

Is that possible in Angularjs directive??

Answer 1

From what I understood from your question, you want to pass a value inside the directive:

  myApp.directive('exportToCsv', function () {
    return {
        restrict: 'A',
        scope : {
           idParameter : '@'  // pass value to the directive
        },
        link: function (scope, element, attrs) {

            function stringify(str) {
                return '"' + str.replace(/^\s\s*/, '').replace(/\s*\s$/, '').replace(/"/g, '""') + '"';
            }

            element.bind('click', function (e) {

                var uniqueId = '#'+scope.idParameter; // <--- you can use it here
                var table = document.querySelector(uniqueId);

                /* var table = e.target.nextElementSibling;*/

                var csvString = '';
                for (var i = 0; i < table.rows.length; i++) {

                    var rowData = table.rows[i].cells;
                    for (var j = 1; j < rowData.length; j++) {
                        if (rowData[j].innerHTML.indexOf('<a href') > -1) {
                            var ele = angular.element(rowData[j]);
                            for (var k = 0; k < ele[0].childNodes.length; k++) {
                                if (ele[0].childNodes[k].tagName == 'A') {
                                    csvString = csvString + stringify(ele[0].childNodes[k].innerText) + ",";
                                }
                            }
                        } else if (rowData[j].innerHTML.indexOf('<em') > -1 || rowData[j].innerHTML.indexOf('<strong>') > -1) {
                            var ele = angular.element(rowData[j]);
                            csvString = csvString + stringify(ele[0].textContent) + ",";
                        } else {
                            csvString = csvString + stringify(rowData[j].innerHTML) + ",";
                        }
                    }
                    csvString = csvString.substring(0, csvString.length - 1);
                    csvString = csvString + "\n";
                }
                console.log(csvString);
                csvString = csvString.substring(0, csvString.length - 1);

                var dl = new Blob([csvString], { type: 'application/csv;base64' });

                saveAs(dl, "export.csv")

            });
        }
    }
});

In case it you have more queries, do let me know in your comments.