Çağrı Denetleyici Direktifi (direktiften geçilen param ile)

Question

Neyi başarmak istediğim, (2 parametreden oluşan) bir fonksiyonu iletmek ve denetleyicide direktifte tanımlamaktır. Direktif paramları ile direktif.

.on('click', function(d, i){ 
    // here I want to call the function from the controller, 
    ctrlCB(d, i); 
}) 

Benim denetleyicisi görünüyor böyle biraz:

(function() { 
'use strict'; 
angular.module('d3') 
    .directive('verticalBarChart', verticalBarChart); 
    verticalBarChart.$inject = ['d3Service', '$window', '$parse']; 
    function verticalBarChart(d3Service, $window, $parse) { 
     return { 
      restrict: 'EA', 
      scope: { 
       data: '=', 
       click: '=click' 
      }, 
      link: function (scope, element, attrs) { 
       d3Service.d3() 
       .then(function (d3) { 
        // some more d3.js stuff 
        svg.selectAll('rect') 
         .data(data).enter() 
         .append('rect') 
         .attr('width', barWidth) 
         .on('click', function (d, i) { 
          scope.click(d, i); // THIS IS THE ONE I'M INTERESTED IN ! 
          // on click it calls the function, but the params don't get passed in 
         }) 
        } 
       }); 
      } 
     }; 
    } 

Yönergesi:

<div vertical-bar-chart bar-padding="2" data="barData" click="clickCallback"></div> 

ve denetleyici ben örneğin bir

$scope.clickCallback = function(d, i){ 
    $location.url('/item/'+i) 
} 

Answer 1

1 olurdu düzeltmek istediğim şey, sen olmalısın = (iki yönlü ciltleme) yerine & (iki ciltli ciltleme) yerine direktifini kullanmak ve oradan çağırmak istediğinizde.

scope: { 
    data: '=', 
    click: '&click', 
    //or just kept it like below where `click` alias is redudant 
    //click: '&' 
}, 

Sonra sadece orada bir gönderme yaptığı ziyade click özellik hakkında çağrı yöntemini yapmak. direktifinden yöntemi çağrı için

click="clickCallback(d, i)" 

, harici olayların kapsamı modifiye edildiği gibidir, onun bağlanma güncelleme çevrimi sindirimi JSON biçiminde & vadeli olarak parametre değerlerini geçirir.

scope.click({d: d, i: i}); 
scope.$apply(); 

Answer 2

güncelleme: Pankaj Parkar iyi cevabı vardır ama silmek yerine fakir bir alternatif olarak benim yazı bırakacağız.

Çubuk grafiğinizi çizen hizmetinize erişemiyorum, ancak bir üst denetleyiciye nasıl bir alt yönergeye sahip olacağımı nasıl paylaşacağımı ve umarım yanıtı temsil eden bir div çubuğunu basitleştirerek sorunuzu yanıtlayacağım. bitiş haritanız. angular1 kod yazarken

codepen: angular d3 directive parent controller talk

$scope.init = function(){ 

     var onBarClickHandler = function(ev){ 
      d3.event.stopPropagation(); 
      $scope.click($scope.data); 
     } 

     var bar = d3.select("#bar"); 
     bar.on("click", onBarClickHandler); 
    } 

Şahsen ben bağlantı yönergesi yerleştirerek yerine denetleyici içine mantığı taşımak ister ama bunu link olan tercih eğer bu da çalışması gerekir.