AnularJS1事件

在Web應用的組件是松耦合的情況下,比如需要用戶驗證然后處理授權,即時的通信不總是可行的,因為組件沒有耦合在一起。

例如,如果后端對一個請求返回了狀態碼401(表明一個未經授權的請求),我們期望Web應用不允許用戶停留在當前視圖,在這種情況下,我們希望應用把用戶重定向到登錄或者注冊頁面去。

基于這個邏輯,我們不能從外部告訴控制器設置一個新地址。我們也希望這個功能能覆蓋多個作用域,這樣可以用相同的行為來保護這些作用域。

我們需要另一種方式在它們之間通信。

AngularJS的作用域在本質上是分層次的:它們可以通過父子關系很自然地來回溝通。但通常,作用域是不共享變量的,它們執行的功能往往各不相同,跟在父樹上的位置無關。

在這種情況下,我們可以通過在這個鏈上傳遞事件的方式在作用域之間通信。

什么是事件

如同瀏覽器相應瀏覽器層的事件,比如鼠標點擊、頁面滾動那樣,Angular應用也可以響應Angular事件。這使我們可以在應用層中嵌套的各組件之間進行通信,即使這些組件在創建時并未考慮到其他組件。

注意,Angular事件系統并不與瀏覽器的事件系統相通,這意味著,我們只能在作用域上監聽Angular事件而不是DOM事件。
我們可以認為,事件是在應用中傳播的信息片段,通常(可選)包含了應用中發生的事情的信息。

事件傳播

因為作用域是有層次的,所以我們可以在作用域鏈上傳遞事件。
通常說來,選擇要使用的事件傳遞方式,一個好的經驗法則是:查看將要觸發事件的作用域。如果要通知整個事件系統(允許任意作用域處理這個事件),就要往下廣播。
另一方面,如果要提醒一個全局模塊(為了說),我們最終需要通知高層次的作用域(例如$rootScope),并且需要把事件向上傳遞。
比如,當我們在做路由的時候,“全局”應用狀態需要知道應用當前設置了哪個頁面。另一方面,如果我們是在一個選項卡指令和它的子面板指令之間通信,就需要把事件向下傳。

使用$emit來冒泡事件

要把事件沿著作用域鏈向上派送(從子作用域到父作用域),我們要使用$emit()函數。

//發送一個事件
//當們的用戶以當前user登錄了
scope.$emit(‘user:logged_in’, scope.user);

在一個emit()事件函數的調用中,事件從子作用域冒泡到父作用域。在產生事件的作用域之上的所有作用域都會收到這個事件的通知。當想要跟應用的其他部分交流狀態的變更時,我們使用emit()事件函數的調用中,事件從子作用域冒泡到父作用域。在產生事件的作用域之上的所有作用域都會收到這個事件的通知。 當想要跟應用的其他部分交流狀態的變更時,我們使用emit()調使emit()。如果想要跟rootScope通信,需要rootScope通信,需要rootScopeemit()這個事件。
$emit()方法帶有兩個參數。
1.name(字符串)
要發出的事件名稱。
2.args(集合)
一個參數的集合,作為對象傳遞到事件監聽器中。
emit()方法返回了一個事件對象從監聽器中發出的一切異常都會傳遞到emit()方法返回了一個事件對象 從監聽器中發出的一切異常都會傳遞到emit()exceptionHandler服務中。

使用$broadcast向下傳遞事件

要把事件向下傳遞(從父作用域到子作用域),我們使用$broadcast()函數。

//等等,購物車去結賬了
//當購物車在結賬的時候
//下面所有的指令都應當禁用自己
scope.broadcast(′cart:checkingout′,scope.cart);在broadcast('cart:checking_out',scope.cart); 在broadcast(cart:checkingo?ut,scope.cart);broadcast()方法上,每個注冊了監聽器的子作用域都會收到這個信息。事件傳播到所有的指令和當前作用域的間接作用域上,并且一路往下調用每個監聽器。
用了$broadcast()方法之后,就設法取消事件的發送了。
$broadcast()方法自身帶有兩個參數。
1.name(字符串)
要發出的事件名稱
2.args(集合)
一個參數的集合,作為對象傳遞到事件監聽器中。
emit()方法返回了一個事件對象從監聽器中發出的一切異常都會傳遞到emit()方法返回了一個事件對象 從監聽器中發出的一切異常都會傳遞到emit()exceptionHandler服務中。

事件監聽

要監聽一個事件,我們可以使用$on()方法。這個方法為具有某個特定名稱的事件注冊了一個監聽器。事件名稱就是在Angular中觸發的事件類型。
例如,我們可以在路由變更過程被觸發時,監聽事件:

$scope.on('$routeChangeStart',function(evt, next, current){//一個新的路由被觸發了
});
不管什么時候事件$routeChangeStart被觸發,監聽器都會被調用。
Angular把evt對象作為第一個參數傳給正在監聽的一切事件,不管它是我們自定義的事件還是內置的Angular服務

事件對象

事件對象有以下屬性。
1.targetScope(作用域對象)
這個屬性是發送或者廣播事件的作用域。
2.currentScope(作用域對象)
這個對象包含了當前處理事件的作用域
3.name(字符串)
這個字符串是觸發之后,我們正在處理的事件名稱。
4.stopPropagation(函數)
stopPropagation()函數取消通過$emit觸發的事件的進一步傳播。
5.preventDefault(函數)
preventDefault把defaultPrevented標志設置為true。盡管不能停止事件的傳播,我們可以告訴子作用域無需處理這個事件
6.defaultPrevented(布爾值)
調用preventDefault()會把defaultPrevented設置為true。
$on()函數返回了一個反注冊函數,我們可以調用它來取消監聽器。

事件相關的核心服務

Angular核心框架發送事件,我們監聽之后執行操作。可以用事件來讓自己的Angular對象能在全局事件的不同狀態上與應用交互。
我們用emit()調用的有好幾個事件,它們把事件往上發,更多調用的是emit()調用的有好幾個事件,它們把事件往上發,更多調用的是emit()調調broadcast()事件。

核心系統的emitted事件下面的事件從指令向上發送到包含指令調用的作用域。我們可以使用emitted事件 下面的事件從指令向上發送到包含指令調用的作用域。我們可以使用emitted調使on()在這個鏈網上的任意作用域里監聽這些方法:

$scope.$on('includeContentLoaded',function(evt){});1.$includeContentLoaded$includeContentLoaded事件當ngInclude的內容重新加載時,從ngInclude指令上觸發。2.$includeContentRequested$indeludeContentRequested事件從diaoyongfngInclude的作用域上發送。每次ngInclude的內容被請求時,它都會被發送。3.$viewContentLoaded$viewContentLoaded事件每當ngView內容被重新加載時,從當前ngView作用域上發送.

核心系統的broadcast事件1.broadcast事件 1.broadcast1.loacationChangeStart
當Angular從loacation服務對瀏覽器的的地址作更新時,會觸發loacation服務對瀏覽器的的地址作更新時,會觸發loacationlocationChangeStart事件.
2.loacationChangeSuccess當且僅當瀏覽器的地址成功變更,又沒有阻止loacationChangeSuccess 當且僅當瀏覽器的地址成功變更,又沒有阻止loacationChangeSuccess,locationChangeStart事件的情況下,locationChangeSuccess事件會從locationChangeSuccess事件會從locationChangeSuccessrootScope事件會從rootScope上廣播出來.3.rootScope上廣播出來. 3.rootScope.3.routeChangeStart
在路由變更發生之前,routeChangeStart事件從routeChangeStart事件從routeChangeStartrootScope發送出來。也就是在路由服務器開始解析路由變更所需的所有依賴項時。

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/251622.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/251622.shtml
英文地址,請注明出處:http://en.pswp.cn/news/251622.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

Java基礎學習總結(8)——super關鍵字

2019獨角獸企業重金招聘Python工程師標準>>> 一、super關鍵字 在JAVA類中使用super來引用父類的成分,用this來引用當前對象,如果一個類從另外一個類繼承,我們new這個子類的實例對象的時候,這個子類對象里面會有一個父類…

conda鏡像

轉自https://blog.csdn.net/guilutian0541/article/details/81004769 conda config --add channels https://mirrors.tuna.tsinghua.edu.cn/anaconda/pkgs/free conda config --add channels https://mirrors.tuna.tsinghua.edu.cn/anaconda/pkgs/main conda config --set show…

Java基礎學習總結(17)——線程

2019獨角獸企業重金招聘Python工程師標準>>> 一、線程的基本概念 線程理解:線程是一個程序里面不同的執行路徑 每一個分支都叫做一個線程,main()叫做主分支,也叫主線程。 程只是一個靜態的概念,機器上的一個.class文件…

(轉)MySQL自帶的性能壓力測試工具mysqlslap詳解

mysqlslap 是 Mysql 自帶的壓力測試工具,可以模擬出大量客戶端同時操作數據庫的情況,通過結果信息來了解數據庫的性能狀況 mysqlslap 的一個主要工作場景就是對數據庫服務器做基準測試 例如我們拿到了一臺服務器,準備做為數據庫服務器&#x…

node.js HelloWord

創建 server.js var http require("http"); http.createServer(function(req,res){ //設置請求頭的編碼格式 res.writeHead(200,{Content-Type:text/html;charsetutf-8}); //設置網頁的編碼格式&#xff08;防止中文亂碼&#xff09; res.write("<head>&…

JavaScript --- this

介紹: this:引用環境執行的環境對象arguments:一個類數組對象,它包含傳入函數的所以參數callee:arguments對象的一個屬性,該屬性是一個指針,指向擁有arguments對象的函數caller:保存著調用當前函數的函數引用apply()方法:第一個參數是作用域&#xff0c;第二個參數是Array實例…

LeetCode Subarray Sum Equals K

原題鏈接在這里&#xff1a;https://leetcode.com/problems/subarray-sum-equals-k/description/ 題目&#xff1a; Given an array of integers and an integer k, you need to find the total number of continuous subarrays whose sum equals to k. Example 1: Input:nums …

水木告白工作室:Java從零入門之模仿頭條資訊(一)

總體設計 一 &#xff1a;Java語言基礎 二 &#xff1a;Spring入門&#xff0c;模板語法和渲染 三 &#xff1a;數據庫交互iBatis集成 四&#xff1a; 用戶注冊 登陸 管理 五&#xff1a; 資訊發布 圖片上傳 資訊首頁 六&#xff1a; 評論中心 站內信 七&#xff1a; Redis入門…

架構師不可不知的十大可擴展架構

2019獨角獸企業重金招聘Python工程師標準>>> 可擴展性正是如今軟件設計領域最值得優先考慮的要素。然而&#xff0c;計算機科學家們還無法了解一套單獨的架構如何才能擴展至各類應用環境當中。相反&#xff0c;我們在數量繁多的方案中所設計出的可擴展性架構&#x…

Winform開發框架中工作流模塊的業務表單開發

在我們開發工作流的時候&#xff0c;往往需要設計到具體業務表單信息的編輯&#xff0c;有些是采用動態編輯的&#xff0c;有些則是在開發過程中處理的&#xff0c;各有各的優點&#xff0c;動態編輯的則方便維護各種各樣的表單&#xff0c;但是數據的綁定及處理則比較麻煩&…

JavaScript --- 跨瀏覽器的事件處理程序

var EventUtil {addHandler: function(element, type, handler) { // 添加事件處理程序if (element.addEventListener) { // DOM2級事件處理程序element.addEventListener (type, handler, false) ;} else if (element.attachEvent) { // IE事件處理程序element.attachEve…

RabbitMQ學習總結(2)——安裝、配置與監控

2019獨角獸企業重金招聘Python工程師標準>>> 一、安裝 1、安裝Erlang 1&#xff09;系統編譯環境&#xff08;這里采用linux/unix 環境&#xff09; ① 安裝環境 虛擬機&#xff1a;VMware Workstation 10.0.1 build Linux系統&#xff1a;CentOS6.5 rabbitMQ官網下…

nginx針對某個url限制ip訪問,常用于后臺訪問限制

nginx針對某個url限制ip訪問&#xff0c;常用于后臺訪問限制 假如我的站點后臺地址為&#xff1a; http://www.abc.net/admin.php 那么我想限制只有個別ip可以訪問后臺&#xff0c;那么需要在配置文件中增加&#xff1a;location ~ .*admin.* {allow 1.1.1.1;allow 12.12.12.0/…

JavaScript --- 跨瀏覽器的事件對象

var EventUtil{addHandler: function(element, type, handler){ // 添加事件方法if (element.addEventListener){element.addEventListener(type, handler, false); // 添加監聽事件,第3個參數false代表:冒泡階段} else if (element.attachEvent) {element.attachEvent("…

第一個C#程序

第一個C#程序 新建項目-選擇模板--控制臺應用程序 還不會用學習版執行程序,沒找到執行(不調試)菜單,調試出一堆線程狀況.用了VS旗艦版完成, 看見C#在VS中的編譯和執行時分開的,eclipse確實叫預編譯軟件,代碼寫好沒錯可以直接運行,編譯由eclipse完成, 提問:為啥VS不這樣設置?是…

XML序列化與反序列化

C#對于XML的序列化與反序列化提供了很好的支持&#xff0c;我們只需要引用System.Xml的命名空間即可&#xff0c;無需使用第三方庫&#xff0c;下面簡單實現了一個XML的序列化與反序列化的幫助類。 1.序列化&#xff1a; 先聲明一個變量var settings new XmlWriterSettings&am…

CODE[VS] 3411 洪水

題目描述 Description小浣熊松松和朋友到野外露營&#xff0c;沒想到遇上了&pi;年一次的大洪水&#xff0c;好在松松是一只愛觀察的小浣熊&#xff0c;他發現露營地的地形和洪水有如下性質&#xff1a; ①露營地可以被看做是一個N*M的矩形方陣&#xff0c;其中左上角坐標為…

JavaScript --- 取得鼠標事件的坐標

說明: clientX和clientY屬性&#xff1a;事件發生時,鼠標指針在視口中的水平和垂直坐標。pageX和pageY屬性&#xff1a;鼠標光標在頁面中的位置。screenX和screenY屬性&#xff1a;鼠標事件發生時&#xff0c;鼠標指針相對于整個屏幕的坐標信息。IE8及更早的版本不支持事件對象…

JavaScript語義基礎

變量&#xff08;Variables&#xff09; Variables是你存儲數據的容器。聲明一個變量需要使用關鍵字var&#xff0c;然后輸入變量的名稱。 1 var myvar; 定義一個變量后&#xff0c;可以賦予變量一個值&#xff1a; 1 myvar "mxp"; 可以將上述操作寫在一行&#x…

spring面試專題一點通,再也不用擔心面試不會回答了

前言文章內容有點小長&#xff0c;希望你能耐心閱讀&#xff0c;更多Java面試題以及學習資料獲取方式&#xff1a;加Qun:1017-599-436免費獲取。還有更多包括電子書&#xff0c;PDF文檔以及視頻精講可以分享給大家&#xff0c;內容覆蓋很廣&#xff0c;分布式緩存、RPC 調用、Z…