前言

作為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方法刷新視圖。

以上這篇angularJS實現不同視圖同步刷新詳解就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持錯新站長站。