angular中實現控制器之間傳遞引數的方式

2023-03-19 00:20:36 字數 2232 閱讀 9741

在angular中,每個controller(控制器)都會有自己的$scope,通過為這個物件新增屬性賦值,就可以將資料傳遞給模板進行渲染,每個$scope只會在自己控制器內起作用,而有時候需要用到其他控制器中的資料,這個時候就要考慮到控制器之間引數的傳遞了。

1.通過$rootscope傳參

首先,在angular中存在作用域的繼承,繼承作用域符合 j**ascript 的原型繼承機制,這意味著如果我們在子作用域中訪問一個父作用域中定義的屬性,j**ascript 首先在子作用域中尋找該屬性,沒找到再從原型鏈上的父作用域中尋找,如果還沒找到會再往上一級原型鏈的父作用域尋找。在 angularjs 中,作用域原型鏈的頂端是$rootscope,anguarjs 將會尋找到$rootscope 為止,如果還是找不到,則會返回 undefined。}}

var app=angular.module("app",);

app.controller('parent', ['$scope',function ($scope) ]);

app.controller('son', ['$scope',function ($scope) ]);

在子控制器中列印name,但我們發現在這個控制器中並未為$scope新增name,於是向父作用域查詢,發現父作用域存在該屬性,所以可以列印出來。

$rootscope 是所有 $scope 的最上層物件,可以理解為一個 angular 應用中的全域性作用域物件。所以為$rootscope新增的屬性,在所有的控制器中都可以訪問得到。但是為它附加太多邏輯或者變數並不是一個好主意,和js全域性汙染是一樣的.

2.通過事件的方式

首先介紹一下angular中的事件廣播:

$on(name,handler) 註冊一個事件處理函式,該函式在特定的事件被當前作用域收到(從父級或者子級作用域)時將被呼叫。

$emit(name,args) 向當前父作用域傳送一個事件,直至根作用域。

$broadcast(name,args) 向當前作用域下的子作用域傳送一個事件。

name表示事件名稱,args表示事件傳播的資料,handler表示在接受到傳遞時要執行的**,該**中有event引數,表示事件,有如下方法:

1)子向父控制器傳值

}www.cppcns.com>

}var app=angular.module("app",);

app.controller('parent', ['$scope',function ($scope) );

}]);

app.controller('son', ['$scope',function ($scope) ]);

2)父向子控制器傳值

var app=angular.module("app",);

app.controller('parent', ['$scope',functio ($scope) ]);

app.controller('son', ['$scope',function (程式設計客棧$scope) );

}]);

注意:引數name相同時,父子控制器之間才可以傳值

這種方式不可實現兄弟級傳值,不過可以使用父級控制器作為中介,先由子控制器傳值給父控制器,然後再由父控制器傳遞給另外的子控制器。

補充:之前遇到一個需求是,父控制器中,觸發change事件後,獲取資料傳遞給子控制,但是在子控制器只需要接受一次,發現可通過如下方式:

var scan=$scope.$on(name,handler);scan();這樣子控制器就只接受可一次,避免了多次接受帶來的影響!

3.通過服務

在angular中服務是一個單例,所以在服務中生成一個物件,該物件就可以利用依賴注入的方式在所有的控制器中共享。

例:var app=angular.module("app",);

app.controller('myctrl', ['$scope','appservice',function ($scope,appservice) ]);

app.controller('myctrl1', ['$scope', 'appservice',function ($scope,appservice) ]);

app.service("appservice", [function()]);

通過在appservice這個服務中新增物件,然後在需要用到的控制器中,通過依賴注入的方式匯入該服務,在myctrl控制器中修改這個物件,在myctrl1中也會得到修改過後的值。

本文標題: angular中實現控制器之間傳遞引數的方式

本文地址:

angular中控制器之間的通訊方式

1,利用作用域的繼承方式 由於作用域的繼承是基於js的原型繼承方式,所以這裡分為兩種情況,當作用域上面的值為基本型別的時候,修改父作用域上面的值會 影響到子作用域,反之,修改子作用域只會影響子作用域的值,不會影響父作用域上面的值 如果需要父作用域與子作用域共享一個值 的話,就需要用到後面一種,即作用...

angular開發 控制器之間的通訊

由於作用域的繼承是基於js的原型繼承方式,所以這裡分為兩種情況,當作用域上面的值為基本型別的時候,修改父作用域上面的值會 影響到子作用域,反之,修改子作用域只會影響子作用域的值,不會影響父作用域上面的值 如果需要父作用域與子作用域共享一個值 的話,就需要用到後面一種,即作用域上的值為物件,任何一方的...

Angular控制器之間的通訊

由於作用域的繼承是基於js的原型繼承方式,所以這裡分為兩種情況,當作用域上面的值為基本型別的時候,修改父作用域上面的值會 影響到子作用域,反之,修改子作用域只會影響子作用域的值,不會影響父作用域上面的值 如果需要父作用域與子作用域共享一個值 的話,就需要用到後面一種,即作用域上的值為物件,任何一方的...

angular 控制器間通訊

div ng controller parent div ng controller chilren1 div div ng controller chilren2 div div 以上 的結構模型如下 圖1 結構模型 1.基於作用域鏈 angular作用域的關係是一個樹狀結構,根節點是 roots...

AngularJS中控制器之間通訊方法

如何在作用域之間通訊呢?1.建立一個單例服務,然後通過這個服務處理所有子作用域的通訊。2.通過作用域中的事件處理通訊。但是這種方法有一些限制 例如,你並不能廣泛的將事件傳播到所有監控的作用域中。你必須選擇是否與父級作用域或者子作用域通訊。on emit和 broadcast使得event data在...

angular 1 x 控制器之間互相傳遞引數

我們要向前方看齊,基於js引用型別的物件就不記了,所以使用基於事件的方式 angular 中 on,emit,boardcast來實現父控制器和子控制器互相通訊,其中 on表示事件監聽,emit表示向父級以上的 作用域觸發事件,boardcast表示向子級以下的作用域廣播事件。比如父控制器向子控制器...

用VC 6 0實現PC機與微控制器之間的資料交換

摘自 c51bbs離線版光碟 工業控制領域 如dcs系統 經常涉及到序列通訊問題。為了實現微機和微控制器之間的資料交換,人們用各種不同方法實現串 行通訊,如dos下采用組合語言或c語言,但在windows 環境下卻存在一些困難和不足。在windows作業系統已經佔據統治地位的情況 下 何況有些系統根...

SpringMVC控制器實現三方式

本篇文章簡要分析實現springmvc 控制器三種方式 註解,實現controller介面和實現httprequesthandler介面三種方式 方式一 使用註解方式 1.controller controller public class mybean 2.web.xml dispatcher o...

51微控制器實現printf

printf函式在格式化輸出時,向下呼叫了char putchar char c 這個函式,在 stdio.h 裡可以發現有這個函式,所以我們需要自己構造一個這樣的函式,即通過串列埠putchar 如下 char putchar char c 重定向 void uart sendchar unsig...

angular2實現子元件之間的實時替換

在實現子元件之間的實時替換之前要學會父子元件之間的傳值。具體步驟看 專案的大體結構如下圖所示 其中main元件是board和preview元件的父元件,其中所有值都是在main父元件中獲取的,獲取到之後再傳給子元件board和preview。頁面是 展示的東西要顯示在preview裡面也就是頁面的右...