摘要:在中,每個控制器都會有自己的,通過為這個對象添加屬性賦值,就可以將數(shù)據(jù)傳遞給模板進行渲染,每個只會在自己控制器內(nèi)起作用,而有時候需要用到其他控制器中的數(shù)據(jù),這個時候就要考慮到控制器之間參數(shù)的傳遞了。向當(dāng)前作用域下的子作用域發(fā)送一個事件。
在angular中,每個controller(控制器)都會有自己的$scope,通過為這個對象添加屬性賦值,就可以將數(shù)據(jù)傳遞給模板進行渲染,每個$scope只會在自己控制器內(nèi)起作用,而有時候需要用到其他控制器中的數(shù)據(jù),這個時候就要考慮到控制器之間參數(shù)的傳遞了。
1.通過$rootscope傳參首先,在angular中存在作用域的繼承,繼承作用域符合 JavaScript 的原型繼承機制,這意味著如果我們在子作用域中訪問一個父作用域中定義的屬性,JavaScript 首先在子作用域中尋找該屬性,沒找到再從原型鏈上的父作用域中尋找,如果還沒找到會再往上一級原型鏈的父作用域?qū)ふ?。?AngularJS 中,作用域原型鏈的頂端是$rootScope,AnguarJS 將會尋找到$rootScope 為止,如果還是找不到,則會返回 undefined。
var app=angular.module("app",[]); app.controller("parent", ["$scope",function ($scope) { $scope.name="hello"; }]); app.controller("son", ["$scope",function ($scope) { console.log($scope.name);//hello }]);{{name}}{{name}}
在子控制器中打印name,但我們發(fā)現(xiàn)在這個控制器中并未為$scope添加name,于是向父作用域查找,發(fā)現(xiàn)父作用域存在該屬性,所以可以打印出來。
$rootscope 是所有 $scope 的最上層對象,可以理解為一個 Angular 應(yīng)用中的全局作用域?qū)ο?。所以?rootscope添加的屬性,在所有的控制器中都可以訪問得到。但是為它附加太多邏輯或者變量并不是一個好主意,和js全局污染是一樣的.
2.通過事件的方式首先介紹一下angular中的事件廣播:
$on(name,handler) 注冊一個事件處理函數(shù),該函數(shù)在特定的事件被當(dāng)前作用域收到(從父級或者子級作用域)時將被調(diào)用。
$emit(name,args) 向當(dāng)前父作用域發(fā)送一個事件,直至根作用域。
$broadcast(name,args) 向當(dāng)前作用域下的子作用域發(fā)送一個事件。
name表示事件名稱,args表示事件傳播的數(shù)據(jù),handler表示在接受到傳遞時要執(zhí)行的回調(diào),該回調(diào)中有event參數(shù),表示事件,有如下方法:
event.targetScope 獲取傳播事件的作用域 event.currentScope 獲取接收事件的作用域 event.name 傳播的事件的名稱 event.stopPropagation() 阻止事件進行冒泡傳播,僅在$emit事件中有效 event.preventDefault() 阻止傳播事件的發(fā)生 event.defaultPrevented 如果調(diào)用了preventDefault事件則返回true1)子向父控制器傳值
2)父向子控制器傳值var app=angular.module("app",[]); app.controller("parent", ["$scope",function ($scope) { $scope.$on("call", function(event,data){ $scope.name=data; console.log(data); }); }]); app.controller("son", ["$scope",function ($scope) { $scope.name="hello"; $scope.$emit("call", $scope.name); }]);{{name}}{{name}}
var app=angular.module("app",[]); app.controller("parent", ["$scope",function ($scope) { $scope.name="hello"; $scope.$broadcast("call", $scope.name);//傳值 }]); app.controller("son", ["$scope",function ($scope) { $scope.$on("call", function(event,data1){ $scope.name1=data1;//接受值 }); }]);
注意:參數(shù)name相同時,父子控制器之間才可以傳值
這種方式不可實現(xiàn)兄弟級傳值,不過可以使用父級控制器作為中介,先由子控制器傳值給父控制器,然后再由父控制器傳遞給另外的子控制器。
補充:之前遇到一個需求是,父控制器中,觸發(fā)change事件后,獲取數(shù)據(jù)傳遞給子控制,但是在子控制器只需要接受一次,發(fā)現(xiàn)可通過如下方式:
var scan=$scope.$on(name,handler);scan();這樣子控制器就只接受可一次,避免了多次接受帶來的影響!3.通過服務(wù)
在angular中服務(wù)是一個單例,所以在服務(wù)中生成一個對象,該對象就可以利用依賴注入的方式在所有的控制器中共享。
例:
var app=angular.module("app",[]); app.controller("myCtrl", ["$scope","appService",function ($scope,appService) { appService.name="hi!!" }]); app.controller("myCtrl1", ["$scope", "appService",function ($scope,appService) { $scope.name=appService.name; }]); app.service("appService", [function(){ this.name="hello"; }]);
通過在appService這個服務(wù)中添加對象,然后在需要用到的控制器中,通過依賴注入的方式導(dǎo)入該服務(wù),在myCtrl控制器中修改這個對象,在myCtrl1中也會得到修改過后的值。
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/82647.html
流行框架 簡介 angularjs是一款非常優(yōu)秀的前端高級JS框架,由谷歌團隊開發(fā)維護,能夠快速構(gòu)建單頁web應(yīng)用,化繁為簡 無論是angularjs還是jQuery都是用原生JS封裝的 庫:對代碼進行封裝,調(diào)用封裝的方法,簡化操作 傳統(tǒng)方式是用get方式獲取元素,然后點方法 jQuery庫實現(xiàn)了對獲取方式的封裝,對方法的封裝 框架:提供代碼書寫規(guī)則,按照規(guī)則去寫代碼,框架會幫我們實現(xiàn)響應(yīng)的功能...
摘要:在父組件中,需要引用子組件的地方,傳入數(shù)據(jù)。其實這種方法和中控制器之間傳遞數(shù)據(jù)的有點類似的。 作用域在vue中,組件實例的作用域是孤立的,父組件模板的內(nèi)容在父組件作用域內(nèi)編譯;子組件模板的內(nèi)容在子組件作用域內(nèi)編譯。這意味著不能 (也不應(yīng)該) 在子組件的模板內(nèi)直接引用父組件的數(shù)據(jù)。下面幾種方法可以實現(xiàn)組件之間數(shù)據(jù)的傳遞。 通過prop傳遞數(shù)據(jù) 1)在子組件中,使用prop屬性,顯示的...
摘要:最近在公司使用用完成了一個項目,在此記錄一下過程中遇到的問題及解決方案。其他兩種方法可參考站內(nèi)文章控制器如何通信結(jié)語以上為我在編寫一個應(yīng)用時遇到的問題及解決方案,記錄并分享出來,歡迎大家指正 最近在公司使用用AngularJS(1.3.9)完成了一個項目,在此記錄一下過程中遇到的問題及解決方案。 使用$http服務(wù)發(fā)送ajax請求時后端無法判斷請求是XMLHttpRequest 問題...
摘要:當(dāng)左右服務(wù)都被解析并返回時,會以服務(wù)為參數(shù)去調(diào)用組件的構(gòu)造函數(shù)。發(fā)送或廣播的消息應(yīng)該限定在最小的作用域。置頂一個通過,發(fā)送的消息列表并且窒息的管理以防止命名沖突在需要格式化數(shù)據(jù)時,將格式 angular 數(shù)據(jù)雙向綁定的框架 提供數(shù)據(jù)綁定,DOM指令。angular,定義了一套規(guī)則,開發(fā)中就必須遵守規(guī)則,這套規(guī)則為項目提供了一套解決方案。 模塊,組件,模板,元數(shù)據(jù),數(shù)據(jù)綁定, 指令,服務(wù)...
閱讀 3613·2021-11-23 09:51
閱讀 1487·2021-11-04 16:08
閱讀 3558·2021-09-02 09:54
閱讀 3624·2019-08-30 15:55
閱讀 2604·2019-08-30 15:54
閱讀 965·2019-08-29 16:30
閱讀 2053·2019-08-29 16:15
閱讀 2325·2019-08-29 14:05