如何添加一個監聽器到Angular指令？

我有一個構建Google圖表的指令。當指令收到圖表中的一個事件時，我想在控制器的作用域上觸發一個事件處理程序。如何添加一個監聽器到Angular指令？

樣品：http://plnkr.co/edit/yn4KuQfrYvlQNbPSWk3Q?p=preview

在我的標記

：

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

在我的指令

：

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

我能做到這一點，用1：

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

在我的控制器

指示？圖表指令是否可以知道行選定的指令？任何幫助你很棒，謝謝。

來源

2013-12-17 blu

作爲後續行動，這是可以做到的要求使用範圍和「＆」和「=」。我會做一些戳動並理解它是如何工作的，並希望用一個答案來更新它。 – blu

以下是工作版本：http://plnkr.co/edit/3C5xNqaWOWTNtQLZpmx6?p=preview。這是查看此回購的結果：https：//github.com/bouil/angular-google-chart。我轉而使用他的指令，但是這個過程讓我更好地瞭解指令，所以花了很多時間。 – blu

您可以訪問範圍功能rowSelected

google.visualization.events.addListener(chart, 'select', function() { 
    console.log('directive#select', chart.getSelection()); 
    scope.rowSelected(chart.getSelection().row) 
});

如果你想不硬編碼rowSelected你可以在通過屬性傳遞它，使之更加靈活。

來源

2013-12-17 23:09:51 cbayram

無論何時您想要改變示波器的角度範圍之外的代碼時，都需要使用$apply來告訴角度。這將運行一個消化週期與他更新範圍

因此，使用以圖表的事件監聽器可以這樣做：

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

});

DEMO

來源

2013-12-17 23:17:28 charlietfl

我這樣做了，直接修改範圍並使用apply，但感覺很奇怪。我不應該爲我的控制器使用該功能的屬性？ – blu

屬性爲什麼？不完全確定你想實現什麼 – charlietfl

不只是直接處理作用域，而是使用標記中的屬性來定義事件處理程序。 – blu

如何添加一個監聽器到Angular指令？

回答

相關問題