0

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?

Community
  • 1
  • 1
pertrai1
  • 4,146
  • 11
  • 46
  • 71
  • Look into $scope.emit http://stackoverflow.com/questions/14502006/working-with-scope-emit-and-on – Matt M Jun 08 '16 at 16:54
  • @MattyM So do I emit from the timer or do I broadcast from the parent when the button is clicked? – pertrai1 Jun 08 '16 at 16:59
  • If the event happens in the child and you need to inform the parent, use emit. If the event happens in the parent and you need to inform the child, use broadcast. If there is no direct relation between the two scopes, you can inject $rootScope into both controllers. – Matt M Jun 08 '16 at 17:02
  • @MattyM Can you add your last comment as an answer please? thank you – pertrai1 Jun 09 '16 at 13:42

1 Answers1

2

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.

Matt M
  • 3,699
  • 5
  • 48
  • 76