javascript - 带有 Angular 指令的 HTML 在附加时不起作用

Question

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

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

使用以下代码，我可以注入(inject)编译后的 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);