javascript - 如何向 Angular 指令添加监听器？

Question

我有一个构建 Google 图表的指令。当指令从图表接收到事件时，我想在 Controller 范围内触发事件处理程序。

示例:http://plnkr.co/edit/yn4KuQfrYvlQNbPSWk3Q?p=preview

在我的标记中:

<div column-chart="chartData" row-selected="rowSelected(index)"></div>

在我的指令中:

google.visualization.events.addListener(chart, 'select', function () {
    console.log('directive#select', chart.getSelection());
    // call the function defined in the markup for "row-selected"
});

在我的 Controller 中:

$scope.rowSelected = function (index) {
    console.log('controller#rowSelected', index);
    // the function I want to ultimately be called
};

我可以用 1 个指令来做到这一点吗？图表指令可以知道行选择指令吗？任何帮助你变得伟大，谢谢。

Answer 1

每当您想要更改范围之外的 Angular 范围的代码时，您都需要使用 $apply 告诉 Angular。这将运行更新范围的摘要周期

因此使用图表中的事件监听器可以做到:

 google.visualization.events.addListener(chart, 'select', function () {
    scope.$apply(function(){
        scope.rowSelected=chart.getSelection()
     })

 });

DEMO