Question

我正在使用ng-grid和csv插件略微调整以支持Internet Explorer。该插件创建一个链接，并将其附加到网格上的适当位置。在我的更改之前，链接工作正常，但没有使用任何指令，只有html。现在我使用ng-csv指令，它根本没有响应，虽然按钮确实显示并且html在检查时看起来正确。当点击按钮时，应该下载一个csv - 现在只下载测试数据，里面有数字5，等。

ngGridCsvExportPlugin函数的相关代码：

    var fp = grid.$root.find(".ng-grid-buttons");
    var csvDataLinkPrevious = grid.$root.find('.ng-grid-buttons .csv-data-link-span');
    var csvDataLinkPrevious2 = grid.$root.find('.ngHeaderButton2');
    if (csvDataLinkPrevious != null) {csvDataLinkPrevious.remove(); csvDataLinkPrevious2.remove(); }
    var csvDataLinkHtml = "<div class='ngHeaderButton2'></div>";
    csvDataLinkHtml += "<span type='button' ng-csv='[\"5\",\"4\"]' ng-hide='true' filename='data.csv' class='csv-data-link-span'><i class='fa fa-file-excel-o excel-icon'></i></span>";
    fp.append(csvDataLinkHtml);

使用以下代码，我可以使用开发工具注入已编译的HTML并查看它在DOM中，但我无法在页面上看到实际的按钮本身：

 $(function() {
      angular.element(document).injector().invoke(function($rootScope, $compile) {
        var link = $compile(csvDataLinkHtml);
        csvDataLinkHtml = link(scope);
        fp.append(csvDataLinkHtml);
      });
    });

Answer 1

看起来您需要编译附加的HTML并将其链接到范围。查看$compile的文档。

$ compile将获取HTML或DOM元素并生成模板函数，然后可以将其链接到作用域。

您可以这样做：

var link = $compile(csvDataLinkHtml);
csvDataLinkHtml = link(scope); // or whatever scope you want to attach to
fp.append(csvDataLinkHtml);

带有Angular指令的HTML在追加时不起作用

1 个答案: