指令からのコールコントローラ関数

Question

私が達成したいのは、（2つのパラメータを取る）関数を渡すことであり、コントローラ内でディレクティブに定義され、ディレクティブparamsを持つディレクティブ。

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

私のコントローラが見えます。このようなビット：

(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 
         }) 
        } 
       }); 
      } 
     }; 
    } 

指令：

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

とコントローラで、私は例えば

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

Answer 1

第一だろう私が修正したいことは、あなたはusiにすべきですfunctionを指示に渡してそこから呼び出すときに=（双方向バインディング）を使用する代わりに&（式バインディング）を使用してください。

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

click属性のメソッドを呼び出すのではなく、そこに参照するのではなく、そのメソッドを呼び出します。指示からメソッドを呼び出す

click="clickCallback(d, i)" 

は、我々は、外部の事象からスコープを変更するように、そのバインディング更新するサイクルを消化JSONフォーマット&実行で、パラメータ値を渡します。

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

Answer 2

update：Pankaj Parkarが良い答えを持っていますが、削除する代わりに貧弱な方法で投稿していきます。

私はあなたの棒グラフを描画するサービスにアクセスすることはできませんが、私は子供の指示を親コントローラに話す方法を共有し、うまくいけば、あなたの終了チャート。 angular1コードを書くときに

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

は個人的に、私は、リンク・ディレクティブに置くのではなく、コントローラにロジックを移動したいが、あなたは、リンクでそれを持つことを好む場合、これも動作するはずです。