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