可以在由生成的代码中添加指令
d3，只需确保
$compile在呈现内容后调用服务即可。
对于给定的示例，它看起来像这样：
.directive('barChart', function($compile){ // inject $compile var chart = d3.custom.barChart(); return { restrict: 'E', replace: true, template: '<div ></div>', scope:{ height: '=height', data: '=data', hovered: '&hovered' }, link: function(scope, element, attrs) { var chartEl = d3.select(element[0]); chart.on('customHover', function(d, i){ scope.hovered({args:d}); }); scope.$watch('data', function (newVal, oldVal) { chartEl.datum(newVal).call(chart); $compile(element.contents())(scope); // <-- call to $compile }); scope.$watch('height', function(d, i){ chartEl.call(chart.height(scope.height)); $compile(element.contents())(scope); // <-- call to $compile }) } }并在
d3的绘图功能中：
bars.enter().append('rect') .classed('bar', true) .attr('myPopover', 'Text to show') // <-- Adding an attribute here. .attr({x: chartW, width: barW, y: function(d, i) { return y1(d); }, height: function(d, i) { return chartH - y1(d); } }) .on('mouseover', dispatch.customHover);Demo
