前言

作為angularJS框架MVC中M和V的橋梁，controller在整個angularJS的web應(yīng)用中有著舉足輕重的作用。

通常我們可以使用單例service的方式在不同的controller里面共享數(shù)據(jù)。比如在controller1中通過點擊事件修改了service里面的值，controller2中再通過點擊事件去獲取service中被修改的值，即實現(xiàn)了一個值的傳遞。但是，如果在controller2中沒有設(shè)置點擊事件，如何實現(xiàn)當(dāng)controller1中修改了值后，controller2自動去獲取新值呢？

比如有這么一個場景，你有一個服務(wù)，服務(wù)中存儲著你需要的數(shù)據(jù)。你有一個列表視圖A，以及一個數(shù)據(jù)顯示視圖B，通過兩個控制器Actl以及Bctl去分別控制這兩個視圖，并且Actl和Bctl有一個共同的父ctl。當(dāng)你點擊列表視圖A中的不同列表項，數(shù)據(jù)顯示視圖B會同步的根據(jù)你選擇的不同列表項去服務(wù)中獲取相應(yīng)的數(shù)據(jù)并將其顯示在自己的視圖界面上。

 通過$on,$broadcast,$emit方法實現(xiàn)不同視圖界面同步刷新

angularJS提供了一整套的事件傳播方法，用來在不同的控制器中傳遞事件以及數(shù)據(jù)。

$on用于在作用域中監(jiān)控從子級或父級作用域中傳播的事件以及相應(yīng)的數(shù)據(jù)。

格式如下：$on(event,data)；

$broadcast的作用是將事件從父級作用域傳播至子級作用域,包括自己。

格式如下：$broadcast(eventName,args)；

$emit的作用是將事件從子級作用域傳播至父級作用域,包括自己，直至根作用域。

格式如下：$emit(eventName,args)；

通過上面三個方法即能實現(xiàn)我們場景的需求。

方法如下：

1.在列表視圖A中，使用譬如$emit('fresh',data)的形式發(fā)射一個事件，data可以是你選擇的這個列表項的編號等

2.在父ctl上通過$on監(jiān)聽該事件，獲取列表視圖A傳遞上來的data，然后通過$broadcast向下廣播事件

3.在數(shù)據(jù)顯示視圖B中，監(jiān)聽父ctl廣播的事件類型，在回調(diào)函數(shù)里面使用得到的data值去service中獲取相應(yīng)的數(shù)據(jù)，然后使用$apply方法刷新視圖。

以上這篇angularJS實現(xiàn)不同視圖同步刷新詳解就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持武林網(wǎng)。