D3和AngularJS指令
D3和AngularJS指令
提问于 2014-02-26 06:29:11
我试图把AngularJS和D3结合起来--两个很棒的图书馆。这个例子是精心设计的，但我有一个合法的用例，在这里我希望使用AngularJS指令插入D3。
下面是一个例子：
- 一个简单的AngularJS指令，
- 用D3简单添加内容
- 最后，使用AngularJS指令使用D3添加内容。
最后一个不起作用，为什么？
这是Fiddle。
HTML：
<body ng-app="d3">
<div hello></div>
<div hello-d3></div>
<div hello-d3-angular></div>
</body>联署材料：
angular.module('d3', [])
.directive('hello', function() {
return {
template: 'Hello Angular!'
};
})
.directive('helloD3', function() {
return {
link: function(scope,elt) {
d3.select(elt[0]).append('div').text('Hello d3!')
}
};
})
.directive('helloD3Angular', function($compile) {
return {
link: function(scope,elt) {
var node = $compile('<div hello></div>')(scope);
d3.select(elt[0]).append(node[0]);
}
};
});回答 2
Stack Overflow用户
回答已采纳
发布于 2014-02-26 07:27:39
我认为这是关于D3 API的，selection.append(name)。
名称可以指定为常量字符串，也可以指定为返回要追加的DOM元素的函数。
http://jsfiddle.net/bateast/4SGsc/7/
因此，如果您想将DOM传递给.append()，请尝试以下操作：
d3.select(elt[0]).append(function() { return node[0]; });Stack Overflow用户
发布于 2021-05-27 18:59:56
您可以使用回调箭头函数来解决这个问题。
d3.select(elt[0]).append(function() {()=> $compile('<div hello></div>')(scope)[0] });页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22033540
复制相关文章
相似问题
腾讯云开发者
