从指令调用控制器函数(使用从指令传递的参数）

Call Controller Function from Directive (with params passed from directive)

本文关键字：指令 参数 调用 控制器 函数      更新时间：2023-09-26

所以我想要实现的是将一个函数（接受 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)
}
我想

纠正的第一件事是，当您想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();

更新：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 );
    }

代码笔：角度 D3 指令父控制器谈话

就个人而言，在编写 angular1 代码时，我喜欢将逻辑移动到控制器中，而不是将其放在 link 指令中，但如果您更喜欢将其放在链接中，这也应该有效。

相关文章：