Angular-ui + D3: bağlamsal menünün nasıl uygulanacağı (popover vs modal)?

Question

aşağıdaki kullanım senaryosunu Verilen:

Ben angularjs tarafından yönetilen nesneleri işlemek için D3js kullanın. D3 grafiğine etkileşim eklemek istiyorum. Bir svg öğesine tıkladığınızda, nesne özelliklerini değiştirmeye izin veren bir tür açılır menüye sahip olmak isterim. Bu özellikler AngularJS tarafından gereklidir, ancak D3 tarafından oluşturulmaz.

D3 Açısal entegrasyon, bir kapatma kullanan http://bl.ocks.org/biovisualize/5372077'dan türetilmiştir.

Güncel uygulanması:

Bugün itibariyle ben açılan menü oluşturmak için köşeli-ui bootstrap dan $ modal hizmetini kullanıyorum. görünümünde bir functionnality açıdan oldukça iyi çalışıyor: Bir svg elemanı tıklandığında , D3 bir etkinlik Yani etkinlik açısal tarafından yakalanan I nesne özelliklerini değiştirmek kalıcı pencere içinde $ modal hizmeti çağrıları gönderir

Ancak, render işleminden memnun değilim. Pop-up menüsünün bir popover gibi görünmesini isterim. Tıklanan svg öğesine yakın yerleştirilmelidir.

1. $ modal hizmeti kullanmak ve görünüşünü değiştirmek devam edin:

   Bildiğim kadarıyla anladığım kadarıyla, ben iki seçenek var. Hangi yaklaşım atılmalı? WindowClass seçeneğini mi kullanıyorsunuz?

2. $ modal servisini kullanmayı bırakın ve popover yönergesi üzerinde hack yapmaya başlayın. Sorun şu ki, bir svg öğesine bir yönerge eklemek mümkün olduğunu düşünmüyorum. Çözüm, $ modal hizmetine yakın bir popover hizmeti oluşturmak olacaktır.

Hangi seçenek belirlenmelidir? ve nasıl uygulanır?

DÜZENLEME: Bir özel my-popover yönergesini kullanarak plunker Çalışma

: Bir direktifleri eklemek için http://plnkr.co/edit/5KYvxi?p=preview

Answer 1

mümkündür d3 tarafından oluşturulan koda, sen sağlamak için gereken tek şey sen misin Oluşturulduktan sonra içerikte $compile servisini arayın.

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

Ve d3 'ın çizim fonksiyonunda:

 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