Angularjs Data Binding among Controller, Directive, and Service

Question

I am trying to update content of a directive with the data coming from a service. It works like this:

1. Service (html5 canvas service) -> calls a method in controller on some action
2. Controller updates $scope.directiveData inside the method called by service
3. Directive (scope: true) should update its content according to the new data

The problem is directive does not update its content. However, when I add a periodic update to directiveData in the controller:

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

Directive updates its content!

Is there any explanation for this behavior? How can I get rid of this periodic update?

I simulated the problem in jsFiddle: https://jsfiddle.net/eyNYw/857/

Answer 1

scope: true makes directive scope isolated (Angular directive. Isolating the Scope of a Directive). So this directive doesn't see controller variable $scope.directiveData.

You can add isolated variable like this

scope: {directiveData: '='}

'=' - means two way binding

And then pass $scope.directiveData through the directive attributes

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

When you update $scope.directiveData angular will update this one for directive.