将 ID 作为参数传递给自定义指令 AngularJS

Question

我正在使用这个将 html 表导出到 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")

                });
            }
        }
    });

这段代码真正困扰我的是“ var table = document.querySelector("#targetTable");”因为它不允许我在同一个 html 视图上重复使用该指令两次。

我试图弄清楚如何将目标 id 作为参数传递给指令函数，所以我可以在标记中使用它，如下所示：

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

在 Angularjs 指令中可能吗？？

Answer 1

根据我从您的问题中了解到的情况，您想在指令中传递一个值：

  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")

            });
        }
    }
});

如果您有更多疑问，请在您的 cmets 中告诉我。