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è)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Angular動(dòng)畫(huà)實(shí)現(xiàn)的2種方式以及添加購(gòu)物車動(dòng)畫(huà)實(shí)例代碼
這篇文章主要給大家介紹了關(guān)于Angular動(dòng)畫(huà)的2種方式以及添加購(gòu)物車動(dòng)畫(huà)的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-08-08
angular實(shí)現(xiàn)form驗(yàn)證實(shí)例代碼
本篇文章主要介紹了angular實(shí)現(xiàn)form驗(yàn)證實(shí)例代碼，具有一定的參考價(jià)值，有興趣的可以了解一下。2017-01-01
詳解angular路由高亮之RouterLinkActive
這篇文章主要介紹了詳解angular路由高亮之RouterLinkActive，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-04-04
Angular2 自定義validators的實(shí)現(xiàn)方法
angular 當(dāng)需要form表單需要驗(yàn)證時(shí)，angular自帶了許多校驗(yàn)器，但是很多時(shí)候自帶的無(wú)法滿足業(yè)務(wù)需求，這時(shí)候就需要自定義的校驗(yàn)器，下面通過(guò)本文給大家分享Angular2 自定義validators的實(shí)現(xiàn)方法，需要的朋友參考下吧2017-07-07
angular+webpack2實(shí)戰(zhàn)例子
本篇文章主要介紹了angular+webpack2實(shí)戰(zhàn)例子，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-05-05
下面小編就為大家?guī)?lái)一篇angularJs關(guān)于指令的一些冷門屬性詳解。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10
詳解AngularJS1.6版本中ui-router路由中/#!/的解決方法
本篇文章主要介紹了詳解AngularJS1.6版本中ui-router路由中/#!/的解決方法，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-05-05
使用Angular material主題定義自己的組件庫(kù)的配色體系
這篇文章主要介紹了使用Angular material主題定義自己的組件庫(kù)的配色體系的相關(guān)知識(shí)，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-09-09
AngularJS實(shí)現(xiàn)多級(jí)下拉框
這篇文章主要為大家詳細(xì)介紹了AngularJS實(shí)現(xiàn)多級(jí)下拉框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
vue更新到2.0之后，作者就宣告不再對(duì)vue-resource更新，而是推薦的axios，所以下面這篇文章主要給大家分享了關(guān)于使用axios的一些心得技巧，文中介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起看看吧。2017-07-07