我是Directive和D3的新手,我试图将这个D3脚本包装成一个自定义指令,这个d3脚本从csv文件加载数据并在html上创建一个表:
当它不在Angular中时它工作正常但是它没有加载ng-bind(并且(也试图使用{{}}表达式工作的问题也不起作用):
d3.text("data.csv", function (data) {
var parsedCSV = d3.csv.parseRows(data);
var container = d3.select("#chart")
.append("table")
.attr("class", "chartable")
.selectAll("tr")
.data(parsedCSV).enter()
.append("tr")
.selectAll("td")
.data(function (d) { return d; }).enter()
.append("td")
.text(function (d) { return d; })
d3.select(".chartable")
.selectAll("tr")
.append("td")
.attr("ng-bind", "addedDays")
d3.select("#chart").append("br")
d3.select("#chart").append("br")
});
在指令包装版本中(不工作):
app.directive("dataTable", function ($parse) {
var directiveDefinitionObject1 = {
restrict: 'E',
replace: false,
// scope: { data: '=tableData' },
link: function () {
d3.text("data.csv", function (data) {
var parsedCSV = d3.csv.parseRows(data);
var container = d3.select("#chart")
.append("table")
.attr("class", "chartable")
.selectAll("tr")
.data(parsedCSV).enter()
.append("tr")
.selectAll("td")
.data(function (d) { return d; }).enter()
.append("td")
.text(function (d) { return d; })
d3.select(".chartable")
.selectAll("tr")
.append("td")
.attr("ng-bind", "addedDays")
d3.select("#chart").append("br")
d3.select("#chart").append("br")
});
}
};
return directiveDefinitionObject1;
});
HTML:
<div ng-controller="Ctrl1">
<data-table>
<div id="chart" >
</div>
</data-table>
</div>
我这样做的原因是因为我想在D3中使用ng-bind(或角度表达式)。
我做错了什么?