为什么可以't在对指令的html调用中访问$rootScope

Why can't the $rootScope be accessed in the html call to the directive?

本文关键字：调用 html 访问 rootScope 指令 为什么      更新时间：2023-09-26

我使用ng csv来允许用户下载他们数据的csv。创建下载链接的代码从一个通用插件模块附加到页面HTML中。在通用模块中，我将导出数据设置为rootScope变量，以便可以从视图中调用它，但它只是返回一个空白文档。我要去哪里？

相关插件代码：

function getOutput(){
    return csvStringify(csvOutput);
}
var stringifiedOutput = csvStringify(csvOutput);
csvDataLinkHtml += "<span type='button' lazy-load='true' ng-csv='$root.csvOutput' csv-header='"+csvStringify(headers)+"' filename='data.csv' class='csv-data-link-span'><i class='fa fa-file-excel-o excel-icon'></i></span>";
$(function() {
  angular.element(document).injector().invoke(function($rootScope, $compile) {
    var link = $compile(csvDataLinkHtml);
    csvDataLinkHtml = link(scope);
    fp.append(csvDataLinkHtml);
    $rootScope.csvOutput = stringifiedOutput;
  });
});

为了澄清，这是一个ng网格插件。

我在代码示例中缺少一些上下文，但您可能正在将模板链接到不同的范围。

尝试在chrome检查器中选择所需的元素，并在控制台中键入angular.element($0).scope()以获取关联的作用域。我猜您可能想做一个$rootScope.$new()，并将其与新元素链接起来。

我们最终将csv数据设置为window.csvData，并更改了ngcsv指令中的几行代码：

function getOutput(){
    return csvStringify(csvOutput);
}
var stringifiedOutput = csvStringify(csvOutput);

window.csvMyData = csvOutput;
var csvDataLinkHtml = "<div class='ngHeaderButton2'><span type='button' lazy-load='true' ng-csv='[]' ng-csv-reference='csvMyData' csv-header='"+csvStringify(headers)+"' filename='data.csv' class='csv-data-link-span'><i class='fa fa-file-excel-o excel-icon'></i></span></div>";
$(function() {
  angular.element(document).injector().invoke(function($compile) {
    var link = $compile(csvDataLinkHtml);
    csvDataLinkHtml = link(scope);
    fp.append(csvDataLinkHtml);
  });
});
相关文章：