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:

Service (html5 canvas service) -> calls a method in controller on some action
Controller updates $scope.directiveData inside the method called by service
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/

NechiK · Accepted Answer · 2016-12-27 09:27:06Z

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.

answered Dec 27, 2016 at 9:27

NechiK

3612 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user2616232 Over a year ago

I tried this one and scope: false, which does not isolate scope at all. Same behavior. I think it is not only about data binding between controller-directive. It is also about service that is calling a function from controller.

NechiK Over a year ago

Need more details. At least example of controller action and directive code.

Collectives™ on Stack Overflow

Angularjs Data Binding among Controller, Directive, and Service

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related