控制器，指令和服務之間的Angularjs數據綁定

Question

我正在嘗試使用來自服務的數據更新指令的內容。 它是這樣的：

1. 服務（html5 canvas服務）->在某些操作上調用控制器中的方法
2. 控制器在服務調用的方法內更新$ scope.directiveData
3. 指令（范圍：true）應根據新數據更新其內容

問題是指令不會更新其內容。 但是，當我向控制器中的directiveData添加定期更新時：

$interval(function() {$scope.directiveData.abc;}, 100);

指令更新其內容！

此行為有任何解釋嗎？ 如何擺脫此定期更新？

我在jsFiddle中模擬了這個問題： https ://jsfiddle.net/eyNYw/857/

Answer 1

scope: true使指令范圍隔離（ Angular指令。隔離指令的范圍 ）。 因此，此指令看不到控制器變量$ scope.directiveData。

您可以像這樣添加隔離變量

scope: {directiveData: '='}

'='-表示雙向綁定

然后通過指令屬性傳遞$ scope.directiveData

<your-directive directive-data="directiveData"></your-directive>

當您更新$ scope.directiveData時，angular會將其更新為指令。