Javascript 从指令调用控制器函数(从指令传递参数)
所以我想要实现的是将控制器中定义的一个函数(包含2个参数)传递到指令中,然后使用params从带有指令params的指令中调用Javascript 从指令调用控制器函数(从指令传递参数),javascript,angularjs,d3.js,angularjs-directive,Javascript,Angularjs,D3.js,Angularjs Directive,所以我想要实现的是将控制器中定义的一个函数(包含2个参数)传递到指令中,然后使用params从带有指令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') .dire
.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: {
data: '=',
click: '&click',
//or just kept it like below where `click` alias is redudant
//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 );
}
就个人而言,在编写angular1代码时,我喜欢将逻辑移到控制器中,而不是将其放在link指令中,但如果您喜欢将其放在link指令中,这也应该起作用 你能在plunkr或JSFIDLE上创建当前的解决方案吗?@Michael很高兴知道这一点。。谢谢:-)
$scope.init = function(){
var onBarClickHandler = function(ev){
d3.event.stopPropagation();
$scope.click( $scope.data );
}
var bar = d3.select("#bar");
bar.on("click", onBarClickHandler );
}