HTML 和 Angular 指令在附加时不起作用

Question

我正在使用 ng-grid，csv 插件稍作调整以支持 Internet Explorer。该插件创建一个 link，并将其附加到网格上的适当位置。在我进行更改之前，link 工作正常，但没有使用任何指令，仅使用 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);

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

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

Answer 1

看来您需要将附加的 HTML 和 link 编译到范围。查看 $compile.

的文档

$compile 将采用 HTML 或 DOM 元素并生成模板函数，然后可以将其 linked 到范围。

你可以这样做：

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

HTML 和 Angular 指令在附加时不起作用

HTML with Angular directives doesn't work when appended

html

javascript

csv

angularjs

ng-grid