angularJS实现不同视图同步刷新

Posted 2020-09-06 zhangjunfeng

前言

　　作为angularJS框架MVC中M和V的桥梁，controller在整个angularJS的web应用中有着举足轻重的作用。

　　通常我们可以使用单例service的方式在不同的controller里面共享数据。比如在controller1中通过点击事件修改了service里面的值，controller2中再通过点击事件去获取service中被修改的值，即实现了一个值的传递。但是，如果在controller2中没有设置点击事件，如何实现当controller1中修改了值后，controller2自动去获取新值呢？

　　比如有这么一个场景，你有一个服务，服务中存储着你需要的数据。你有一个列表视图A，以及一个数据显示视图B，通过两个控制器Actl以及Bctl去分别控制这两个视图，并且Actl和Bctl有一个共同的父ctl。当你点击列表视图A中的不同列表项，数据显示视图B会同步的根据你选择的不同列表项去服务中获取相应的数据并将其显示在自己的视图界面上。

 

通过$on,$broadcast,$emit方法实现不同视图界面同步刷新

　　angularJS提供了一整套的事件传播方法，用来在不同的控制器中传递事件以及数据。

　　$on用于在作用域中监控从子级或父级作用域中传播的事件以及相应的数据。格式如下：$on(event,data)；

　　$broadcast的作用是将事件从父级作用域传播至子级作用域,包括自己。格式如下：$broadcast(eventName,args)；

　　$emit的作用是将事件从子级作用域传播至父级作用域,包括自己，直至根作用域。格式如下：$emit(eventName,args)；

　　通过上面三个方法即能实现我们场景的需求。方法如下

　　1.在列表视图A中，使用譬如$emit(‘fresh‘,data)的形式发射一个事件，data可以是你选择的这个列表项的编号等

　　2.在父ctl上通过$on监听该事件，获取列表视图A传递上来的data，然后通过$broadcast向下广播事件

　　3.在数据显示视图B中，监听父ctl广播的事件类型，在回调函数里面使用得到的data值去service中获取相应的数据，然后使用$apply方法刷新视图