angularJS實(shí)現(xiàn)不同視圖同步刷新詳解

前言

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

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

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

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

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

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

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

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

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

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

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

通過(guò)上面三個(gè)方法即能實(shí)現(xiàn)我們場(chǎng)景的需求。

方法如下：

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

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

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

以上這篇angularJS實(shí)現(xiàn)不同視圖同步刷新詳解就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持億速云。