控制器，指令和服务之间的Angularjs数据绑定

Question

我正在尝试使用来自服务的数据更新指令的内容。它的工作原理如下：

1. 服务（html5画布服务） - ＆gt;在一些操作中调用控制器中的方法
2. Controller在service
调用的方法中更新$ scope.directiveData
3. 指令（范围：true）应根据新数据更新其内容

问题是指令不更新其内容。但是，当我在控制器中向directiveData添加定期更新时：

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

指令更新其内容！

这种行为有什么解释吗？我怎样才能摆脱这种定期更新？

我在jsFiddle中模拟了问题：https://jsfiddle.net/eyNYw/857/

Answer 1

scope: true使指令范围孤立（Angular directive. Isolating the Scope of a Directive）。所以这个指令没有看到控制器变量$ scope.directiveData。

您可以像这样添加孤立变量

scope: {directiveData: '='}

  

'=' - 表示双向绑定

然后通过指令属性

传递$ scope.directiveData

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

当您更新$ scope.directiveData时，angular会更新此指令。