angularjs控制器controller正確的通信的方法_angularjs

angularjs控制器controller正確的通信的方法_angularjs

ID:30774334

大小:53.00 KB

頁數(shù):4頁

時間:2019-01-03

angularjs控制器controller正確的通信的方法_angularjs_第1頁
angularjs控制器controller正確的通信的方法_angularjs_第2頁
angularjs控制器controller正確的通信的方法_angularjs_第3頁
angularjs控制器controller正確的通信的方法_angularjs_第4頁
資源描述:

《angularjs控制器controller正確的通信的方法_angularjs》由會員上傳分享,免費在線閱讀,更多相關(guān)內(nèi)容在工程資料-天天文庫

1、AngularJS控制器controller正確的通信的方法AngularJS是一款非常強大的前端MVC框架,AngularJS中的controller是個函數(shù),用來向視圖的作用域(Sscopc)添加額外的功能,我們用它來給作用域?qū)ο笤O(shè)置初始狀態(tài),并添加自定義行為。當(dāng)我們在創(chuàng)建新的控制器時,angularJS會幫我們牛成并傳遞一個新的$scope對象給這個controller,在angularJS應(yīng)用的小的任何一個部分,都有父級作用域的存在,頂級就是ng-app所在的層級,它的父級作用域就是SrootScopeo每個$sco

2、pc的$root指向$rootScopc,$copc.$parcnt指向父級作用域。cotroller之間的通信本質(zhì)上是當(dāng)前的controller所在的$scope如何跟-其他controller上的$scope進行通信。通常有3中解決方式:利用作用域繼承的原理,子控制器訪問父級控制器中的內(nèi)容。使用angularJS中的事件,也就是使用$on,$cmit,$broadcast進彳亍消息傳遞使用angularJS中的服務(wù)笫一種方式即作用域嵌套作用域,有一定的使用限制,需耍作用域嵌套起來,在實際開發(fā)中這種場景相對比較少,但也不是

3、沒有,這種方式更簡單直接。angularJS中默認(rèn)情況卜當(dāng)前作用域中無法找到某個屈性時,就會在父級作用上或屮進行查找,若找不到直至查找到$rootScope0如果在$rootScope屮也無法找到程序依舊運行,但視圖不會更新。示例javascript//Javascriptapp.controller(,Parentcontroller',function($scope){$scope.person二{greeted:false);});app.controllerChildControllcr,,function($sco

4、pe){$scope.sayHello=function(){$scope?person,name='AriLerner;};});//HTMLSayhcllo

{{person}}
//result{"greeted":true,,,name,/:"AriLerner"}第二種方式因為作用威是冇層次

5、的,所以可以利用作用域鏈傳遞事件。傳遞事件有2種方式:*$broadcast:觸發(fā)的事件要通知整個事件系統(tǒng)(允許任意作用域處理這個事件)就要向下傳播。*$emit:如果要提醒一個全局模塊,需要通知更高層次的作用域時(例如$rootscope)需要把事件向上傳遞。作用域上使用$on進行事件監(jiān)聽。示例JavaScriptapp.controller(JParentController,,function($scope){$scopc.$on(5$fromSubControllcrClickJ,function(c,data){c

6、onsole,log(data);//hello});});app.controller(JChildController,,function($scope){$scopc.sayHello=function(){$scope.$emit('$fromSubControllerClick,,'hello');};});//HTML

7、Sayhello

在這里想要說的另外一個問題就是事件傳播的性能問題,$broadcast+$on的方式冋通知所有的子作用域,這里就會有性能問題,所以推薦使用$emit+$on的方式,為了進一步提升性能,定義的事件處理函數(shù)要在作用域銷毀吋一起釋放掉。使用$emit+$on的方式需要我們將事件監(jiān)聽綁定在$rootScope上,例如:JavaScriptangular?module('MyApp')?controller(,MyController",['$scope",'$rootScope",fu

8、nctionMyControl1er($scope,$rootScope){varunbind二$rootScopc.$on(,somcComporient.somcCrazyEvcnt,,function(){console.logCfoo,);});$scope.$on(‘Sdestr

當(dāng)前文檔最多預(yù)覽五頁,下載文檔查看全文

此文檔下載收益歸作者所有

當(dāng)前文檔最多預(yù)覽五頁,下載文檔查看全文
溫馨提示:
1. 部分包含數(shù)學(xué)公式或PPT動畫的文件,查看預(yù)覽時可能會顯示錯亂或異常,文件下載后無此問題,請放心下載。
2. 本文檔由用戶上傳,版權(quán)歸屬用戶,天天文庫負(fù)責(zé)整理代發(fā)布。如果您對本文檔版權(quán)有爭議請及時聯(lián)系客服。
3. 下載前請仔細閱讀文檔內(nèi)容,確認(rèn)文檔內(nèi)容符合您的需求后進行下載,若出現(xiàn)內(nèi)容與標(biāo)題不符可向本站投訴處理。
4. 下載文檔時可能由于網(wǎng)絡(luò)波動等原因無法下載或下載錯誤,付費完成后未能成功下載的用戶請聯(lián)系客服處理。
相關(guān)標(biāo)簽