Angular-ui + D3：如何實現上下文菜單（popover vs modal）？

Question

鑑於以下用例：

我使用D3js來渲染由AngularJS管理的對象。我想添加與D3圖表的交互性。當點擊一個svg元素時，我希望有一種彈出菜單允許修改對象屬性。這些屬性是AngularJS需要的，但不是由D3渲染的。

D3-Angular集成來自使用閉包的http://bl.ocks.org/biovisualize/5372077。

當前實現：

截至今天我使用從角UI引導的$模式服務，創建彈出菜單。從一個functionnality點它工作得很好： 當SVG元素上點擊，D3調度一個事件 該事件是由角逮住它調用$模式服務 在模態窗口，我修改對象屬性

但是我對渲染不滿意。我希望彈出菜單看起來像一個popover。它應該靠近被點擊的svg元素。

據我瞭解，我有兩個選項：

1. 繼續使用$模式服務，並修改其外觀。應該採取什麼方法？使用windowClass選項？
2. 停止使用$ modal服務並開始對popover指令進行黑客入侵。問題是，我不認爲有可能 將這樣的指令添加到svg元素。解決辦法是到 創建一個接近$ modal服務的popover服務。

應該選擇哪個選項？以及如何實施它？

編輯：

使用自定義的我，酥料餅的指令工作plunker： http://plnkr.co/edit/5KYvxi?p=preview

Answer 1

有可能增加一個指令通過d3到生成的代碼，只需要確保的是你內容呈現後，請在內容上調用$compile服務。

對於給定的例子，它會是這個樣子：

.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 
       }) 
      } 
     } 

而在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