javascript - 从指令调用 Controller 函数(使用从指令传递的参数)

Question

所以我想要实现的是将一个函数(接受 2 个参数)传递到指令中并在 Controller 中定义，并使用指令参数从指令中调用参数。

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

我的 Controller 看起来有点像这样:

(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>

例如，在 Controller 中我有一个

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

Answer 1

我想纠正的第一件事是，当你想通过function 到指令并从那里调用它。

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

然后在 click 属性上调用方法，而不是仅仅在那里引用它。

click="clickCallback(d, i)"

对于从指令调用方法，以 JSON 格式传递其参数值并运行摘要循环以在我们从外部事件修改范围时更新其绑定(bind)。

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