Angularjs implementing different View synchronization refreshes

Objective

As a bridge between M and V in ANGULARJS framework MVC, Controller plays a pivotal role in the entire ANGULARJS Web application.

Usually we can use a singleton service to share data in different controllers. For example, in the Controller1 by clicking the event to modify the value of the service, Controller2 in the Click event to obtain the service in the modified value, that is, a value is implemented. However, if you do not set a click event in Controller2, how do you implement it when the value is modified in Controller1, Controller2 automatically get the new value?

For example, there is a scenario where you have a service that stores the data you need. You have a list view a, and a data display view B, with two controllers Actl and Bctl to control both views separately, and Actl and Bctl have a common parent ctl. When you click on a different list item in List view A, data display view B synchronizes the data to the service according to the different list items you choose and displays it in its own view interface.

Through $on, $broadcast, $emit method to achieve synchronization refresh of different view interface

ANGULARJS provides a complete set of event propagation methods for passing events and data to different controllers.

$on is used to monitor events that propagate from a child or parent scope and the corresponding data in the scope. The format is as follows: $on (Event,data);

$broadcast's role is to propagate events from the parent scope to the child scope, including itself. The format is as follows: $broadcast (Eventname,args);

$emit's role is to propagate events from the child scope to the parent scope, including itself, up to the root scope. The format is as follows: $emit (Eventname,args);

The requirements of our scene can be realized by the above three methods. Methods are as follows

1. In the list view a, use such as $emit (' fresh ', data) to emit an event, data can be the number of the list item you select, etc.

2. Listen to the event through $on on the parent CTL, get the data that is passed by the list view a, and then broadcast the event through $broadcast

3. In the data display view B, listen for the event type of the parent CTL broadcast, use the resulting data value in the callback function to get the corresponding information in the service, and then use the $apply method to refresh the view

Angularjs implementing different View synchronization refreshes