Learning AngularJS

Implementing Custom Events in Nested Controllers

Listings 8.3 and 8.4 illustrate the use of $emit(), $broadcast(), and $on() to send and handle events up and down the scope hierarchy. In Listing 8.3, lines 2–15 implement a parent scope controller called Characters, and lines 16–32 define a child scope controller named Character.

Also in Listing 8.3, the changeName() function changes the currentName value and then broadcasts a CharacterChanged event. The CharacterChanged event is handled in lines 26–28, using the $on() method, and sets the currentInfo value in the scope, which will update the page elements.

Notice that line 6 of Listing 8.3 uses the this keyword to access the name property. The name property actually comes from a dynamic child ...