Angular.js中控制器之間的傳值詳解-創(chuàng)新互聯(lián)

前言

成都創(chuàng)新互聯(lián)專(zhuān)注于魯山網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠(chéng)為您提供魯山營(yíng)銷(xiāo)型網(wǎng)站建設(shè)，魯山網(wǎng)站制作、魯山網(wǎng)頁(yè)設(shè)計(jì)、魯山網(wǎng)站官網(wǎng)定制、小程序開(kāi)發(fā)服務(wù)，打造魯山網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供魯山網(wǎng)站排名全網(wǎng)營(yíng)銷(xiāo)落地服務(wù)。

每個(gè)controller都會(huì)有自己的scope，所有的scope都是屬于 $rootScope的子或者子的子...

那么問(wèn)題就好解決了，通過(guò)$rootScope.$broadcast廣播的事件每個(gè)controller都能收到事件

另外，我的經(jīng)驗(yàn)是，盡量不要用event傳數(shù)據(jù)。應(yīng)該建立一個(gè)service來(lái)保存數(shù)據(jù)，并且設(shè)置相應(yīng)getter/setter，具體如下：

每個(gè)controller依賴(lài)service,call service.setter(...)

統(tǒng)一的service.setter(...)在改完數(shù)據(jù)后可以$emit('data-updated')

每個(gè)controller里$on('data-updated', function(){ $scope.data = service.getData() })

通過(guò)Angular的話(huà)可以通過(guò)下面四種方法

1、event

這里可以有兩種方式，一種是$scope.$emit，然后通過(guò)監(jiān)聽(tīng)$rootScope的事件獲取參數(shù)；另一種是$rootScope.$broadcast，通過(guò)監(jiān)聽(tīng)$scope的事件獲取參數(shù)。

這兩種方法在最新版本的Angular中已經(jīng)沒(méi)有性能區(qū)別了，主要就是事件發(fā)送的方向不同，可以按實(shí)際情況選擇。

2、service

可以創(chuàng)建一個(gè)專(zhuān)用的事件Service，也可以按照業(yè)務(wù)邏輯切分，將數(shù)據(jù)存儲(chǔ)在相應(yīng)的Service中，因?yàn)橐呀?jīng)有人提過(guò)了就不贅述了。

3、$rootScope

這個(gè)方法可能會(huì)比較dirty一點(diǎn)，勝在方便，也就是把數(shù)據(jù)存在$rootScope中，這樣各個(gè)子$scope都可以調(diào)用，不過(guò)需要注意一下生命周期

4、直接使用$scope.$nextSibling及類(lèi)似的屬性

類(lèi)似的還有$scope.$parent。這個(gè)方法的缺點(diǎn)就更多了，官方不推薦使用任何$開(kāi)頭的屬性，既增加了耦合，又需要處理異步的問(wèn)題，而且scope的順序也不是固定的。不推薦

另外就是通過(guò)本地存儲(chǔ)、全局變量或者現(xiàn)代瀏覽器的postMessage來(lái)傳遞參數(shù)了，除非特殊情況，請(qǐng)避免這類(lèi)方式。

直接建一個(gè)service，不要用什么事件，項(xiàng)目一大N多個(gè)controller或者N久再去維護(hù)會(huì)玩死你，service里提供存和取的方法，簡(jiǎn)單明了，API容易查找和修改，調(diào)試也方便無(wú)混亂的依賴(lài)關(guān)系

1、利用作用域的繼承方式

由于作用域的繼承是基于js的原型繼承方式，所以這里分為兩種情況，當(dāng)作用域上面的值為基本類(lèi)型的時(shí)候，修改父作用域上面的值會(huì) 影響到子作用域，反之，修改子作用域只會(huì)影響子作用域的值，不會(huì)影響父作用域上面的值；如果需要父作用域與子作用域共享一個(gè)值 的話(huà)，就需要用到后面一種，即作用域上的值為對(duì)象，任何一方的修改都能影響另一方，這是因?yàn)樵趈s中對(duì)象都是引用類(lèi)型。

基本類(lèi)型

function Sandcrawler($scope) {
 $scope.location = "Mos Eisley North";
 $scope.move = function(newLocation) {
 $scope.location = newLocation;
 }}function Droid($scope) {
 $scope.sell = function(newLocation) {
 $scope.location = newLocation;
 }}// html<div ng-controller="Sandcrawler">
 <p>Location: {{location}}</p>
 <button ng-click="move('Mos Eisley South')">Move</button>
 <div ng-controller="Droid">
 <p>Location: {{location}}</p>
 <button ng-click="sell('Owen Farm')">Sell</button>
 </div></div>

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站www.muchs.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線(xiàn)，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性?xún)r(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專(zhuān)為企業(yè)上云打造定制，能夠滿(mǎn)足用戶(hù)豐富、多元化的應(yīng)用場(chǎng)景需求。

文章名稱(chēng)：Angular.js中控制器之間的傳值詳解-創(chuàng)新互聯(lián)
文章分享：http://www.muchs.cn/article0/dsogio.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站設(shè)計(jì)、移動(dòng)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)公司、品牌網(wǎng)站建設(shè)、做網(wǎng)站、外貿(mào)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)