CODEWITHSUNDEEP
javascriptangularjs
pertrai1
pertrai1

Reputation: 4318

Angular directive to directive communication for timer

I have taken the ideas from AngularJS - How to make a stop watch starting from 00:00:00 format and have a need to have the timer be able to have a stop method go up to the parent directive for a button that is in the parent template.

<parent-container>
  <timer-container />
  <button ng-click="??.stopTimer()">Stop</button>
</parent-container>

If there is a method in the timer-container that will stop the timer, how do I get the parent container and timer container to interact so that when the button is clicked, the stopTimer method will be invoked?

Upvotes: 0

Views: 78

Answers (1)

Matt M
Matt M

Reputation: 3779

Look into the $emit and $broadcast functions. $emit will send an event up the heirarchy and $broadcast sends the event down the heirarchy. You can add a listener using the $on function.

If there is no direct relation between the two scopes, you can inject $rootScope into both controllers and handle the event there.

For a more complete example, check the answer I linked in my comment.

Upvotes: 2

Related Questions