Issue
I'm trying to combine AngularJS and D3 -- two awesome libraries. This example is contrived but I have a legitimate use case where I'd like to insert HTML with AngularJS directives by means of D3.
Here's an example with:
- a simple AngularJS directive,
- a simple adding of content with D3
- and finally adding a content with AngularJS directive using D3.
The last one does not work; why?
HTML:
<body ng-app="d3">
<div hello></div>
<div hello-d3></div>
<div hello-d3-angular></div>
</body>
JS:
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]);
}
};
});
Solution
I think it's about D3 API, selection.append(name) .
The name may be specified either as a constant string or as a function that returns the DOM element to append.
http://jsfiddle.net/bateast/4SGsc/7/
So if you want to pass a DOM to .append(), try this instead:
d3.select(elt[0]).append(function() { return node[0]; });
Answered By - Banana-In-Black
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.