Функция контроллера вызовов из директивы (с параметрами, переданными из директивы)

Question

Итак, я хочу, чтобы передать функцию (которая принимает 2 параметра) и определена в контроллере, в директиву и вызывается с параметрами из директива с директивными параметрами.

.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 ng & (привязка выражения) вместо того, чтобы использовать = (двусторонняя привязка), когда вы хотели передать 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

обновление: Pankaj Parkar имеет лучший ответ, но я оставлю свое сообщение как плохую альтернативу, а не удалю его.

У меня нет доступа к вашему сервису, который рисует вашу гистограмму, но я расскажу, как бы у меня была директива для детей с родительским контроллером и, надеюсь, ответ на ваш вопрос, упростив щелчок до панели div, представляющей ваш конец диаграммы.

$scope.init = function(){ 

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

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

codepen: angular d3 directive parent controller talk

Лично я, когда пишу angular1 код, я хотел бы переместить логику в контроллер вместо того, чтобы поместить его в директиве ссылки, но это также должно работать, если вы предпочитаете иметь его в ссылке.