Angular-ui + D3: how to implement contextual menu (popover vs modal)?

Question

Given the following use-case:

I use D3js to render objects which are managed by AngularJS. I would like to add interactivity to the D3 chart. When c

Answer 1

It is possible to add a directives to code generated by d3, only thing you need to ensure is that you call the $compile service on the content after it has been rendered.

For the given example, it would look something like this:

    .directive('barChart', function($compile){  // inject $compile
        var chart = d3.custom.barChart();
        return {
            restrict: 'E',
            replace: true,
            template: '<div class="chart"></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
                })
            }
        }

And in the d3's drawing function:

       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