資訊專欄INFORMATION COLUMN
摘要：每個(gè)的指向指向父級(jí)作用域。之間的通信本質(zhì)上是當(dāng)前的所在的如何跟其他上的進(jìn)行通信。傳遞事件有種方式觸發(fā)的事件要通知整個(gè)事件系統(tǒng)允許任意作用域處理這個(gè)事件就要向下傳播。作用域上使用進(jìn)行事件監(jiān)聽(tīng)。示例關(guān)于同級(jí)之間通信我的一個(gè)提問(wèn)
原文鏈接：http://www.cnblogs.com/webbes...
AngularJS中的controller是個(gè)函數(shù)，用來(lái)向視圖的作用域（$scope）添加額外的功能，我們用它來(lái)給作用域?qū)ο笤O(shè)置初始狀態(tài)，并添加自定義行為。
當(dāng)我們?cè)趧?chuàng)建新的控制器時(shí)，angularJS會(huì)幫我們生成并傳遞一個(gè)新的$scope對(duì)象給這個(gè)controller,在angularJS應(yīng)用的中的任何一個(gè)部分，都有父級(jí)作用域的存在，頂級(jí)就是ng-app所在的層級(jí)，它的父級(jí)作用域就是$rootScope。
每個(gè)$scope的$root指向$rootScope, $cope.$parent指向父級(jí)作用域。
cotroller之間的通信本質(zhì)上是當(dāng)前的controller所在的$scope如何跟其他controller上的$scope進(jìn)行通信。
通常有3中解決方式：
利用作用域繼承的原理，子控制器訪問(wèn)父級(jí)控制器中的內(nèi)容。
使用angularJS中的事件，也就是使用$on,$emit,$broadcast進(jìn)行消息傳遞
使用angularJS中的服務(wù)
第一種方式
即作用域嵌套作用域，有一定的使用限制，需要作用域嵌套起來(lái)，在實(shí)際開(kāi)發(fā)中這種場(chǎng)景相對(duì)比較少，但也不是沒(méi)有，這種方式更簡(jiǎn)單直接。
angularJS中默認(rèn)情況下，當(dāng)前作用域中無(wú)法找到某個(gè)屬性時(shí)，就會(huì)在父級(jí)作用域中進(jìn)行查找，若找不到直至查找到$rootScope。 如果在$rootScope中也無(wú)法找到程序依舊運(yùn)行，但視圖不會(huì)更新。
示例
JavaScript
//Javascript
app.controller("ParentController", function($scope) {
$scope.person = {greeted: false};
});
app.controller("ChildController", function($scope) {
$scope.sayHello = function() {
$scope.person.name = "Ari Lerner";
};
});
//HTML
{{ person }}
//result
{"greeted":true, "name": "Ari Lerner"}
第二種方式
因?yàn)樽饔糜蚴怯袑哟蔚?，所以可以利用作用域鏈傳遞事件。
傳遞事件有2種方式： $broadcast: 觸發(fā)的事件要通知整個(gè)事件系統(tǒng)（允許任意作用域處理這個(gè)事件）就要向下傳播。 $emit: 如果要提醒一個(gè)全局模塊，需要通知更高層次的作用域時(shí)（例如$rootscope）需要把事件向上傳遞。
作用域上使用$on進(jìn)行事件監(jiān)聽(tīng)。
示例
JavaScript
app.controller("ParentController", function($scope) {
$scope.$on("$fromSubControllerClick", function(e,data){
console.log(data); // hello
});
});
app.controller("ChildController", function($scope) {
$scope.sayHello = function() {
$scope.$emit("$fromSubControllerClick","hello");
};
});
//HTML
在這里想要說(shuō)的另外一個(gè)問(wèn)題就是事件傳播的性能問(wèn)題，$broadcast+$on的方式回通知所有的子作用域，這里就會(huì)有性能問(wèn)題，所以推薦使用$emit+$on的方式,為了進(jìn)一步提升性能，定義的事件處理函數(shù)要在作用域銷毀時(shí)一起釋放掉。
使用$emit+$on的方式需要我們將事件監(jiān)聽(tīng)綁定在$rootScope上，例如：
JavaScript
angular
.module("MyApp")
.controller("MyController", ["$scope", "$rootScope", function MyController($scope, $rootScope) {
var unbind = $rootScope.$on("someComponent.someCrazyEvent", function(){
console.log("foo");
});
$scope.$on("$destroy", unbind);
}
]);
但是這種方式有點(diǎn)繁瑣，定義多個(gè)事件處理函數(shù)時(shí)整個(gè)人都不好了，所以我們來(lái)改進(jìn)一下
利用裝飾器來(lái)定義一個(gè)新的事件綁定函數(shù)：
JavaScript
angular
.module("MyApp")
.config(["$provide", function($provide){
$provide.decorator("$rootScope", ["$delegate", function($delegate){
Object.defineProperty($delegate.constructor.prototype, "$onRootScope", {
value: function(name, listener){
var unsubscribe = $delegate.$on(name, listener);
this.$on("$destroy", unsubscribe);
return unsubscribe;
},
enumerable: false
});
return $delegate;
}]);
}]);
那么我們?cè)诳刂破髦卸x事件處理函數(shù)時(shí)：
JavaScript
angular
.module("MyApp")
.controller("MyController", ["$scope", function MyController($scope) {
$scope.$onRootScope("someComponent.someCrazyEvent", function(){
console.log("foo");
});
}
]);
第三種方式
利用angularJS中service單例模式的特性，服務(wù)(service)提供了一種能在應(yīng)用的整個(gè)生命周期內(nèi)保持?jǐn)?shù)據(jù)的方式，能夠在控制器之間進(jìn)行通信，且能保證數(shù)據(jù)的一致性。
一般我們都會(huì)封裝server來(lái)為應(yīng)用提供訪問(wèn)數(shù)據(jù)的接口，或者跟遠(yuǎn)程進(jìn)行數(shù)據(jù)交互。
示例
JavaScript
var myApp = angular.module("myApp", []);
myApp.factory("Data", function() {
return {
name: "Ting"
}
});
myApp.controller("FirstCtrl", function($scope, Data) {
$scope.data = Data;
$scope.setName = function() {
Data.name = "Jack";
}
});
myApp.controller("SecondCtrl", function($scope, Data) {
$scope.data = Data;
$scope.setName = function() {
Data.name = "Moby";
}
});
關(guān)于同級(jí)controller之間通信我的一個(gè)提問(wèn)：https://segmentfault.com/q/10...
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/84489.html
摘要：最近在公司使用用完成了一個(gè)項(xiàng)目，在此記錄一下過(guò)程中遇到的問(wèn)題及解決方案。其他兩種方法可參考站內(nèi)文章控制器如何通信結(jié)語(yǔ)以上為我在編寫一個(gè)應(yīng)用時(shí)遇到的問(wèn)題及解決方案，記錄并分享出來(lái)，歡迎大家指正 最近在公司使用用AngularJS（1.3.9）完成了一個(gè)項(xiàng)目，在此記錄一下過(guò)程中遇到的問(wèn)題及解決方案。 使用$http服務(wù)發(fā)送ajax請(qǐng)求時(shí)后端無(wú)法判斷請(qǐng)求是XMLHttpRequest 問(wèn)題...
流行框架 簡(jiǎn)介 angularjs是一款非常優(yōu)秀的前端高級(jí)JS框架，由谷歌團(tuán)隊(duì)開(kāi)發(fā)維護(hù)，能夠快速構(gòu)建單頁(yè)web應(yīng)用，化繁為簡(jiǎn) 無(wú)論是angularjs還是jQuery都是用原生JS封裝的 庫(kù)：對(duì)代碼進(jìn)行封裝，調(diào)用封裝的方法，簡(jiǎn)化操作 傳統(tǒng)方式是用get方式獲取元素，然后點(diǎn)方法 jQuery庫(kù)實(shí)現(xiàn)了對(duì)獲取方式的封裝，對(duì)方法的封裝 框架：提供代碼書寫規(guī)則，按照規(guī)則去寫代碼，框架會(huì)幫我們實(shí)現(xiàn)響應(yīng)的功能...
摘要：雖然計(jì)算屬性在大多數(shù)情況下更合適，但有時(shí)也需要一個(gè)自定義的偵聽(tīng)器，當(dāng)需要在數(shù)據(jù)變化時(shí)執(zhí)行異步或開(kāi)銷較大的操作時(shí)，通過(guò)偵聽(tīng)器最有用。路由的鉤子函數(shù)首頁(yè)可以控制導(dǎo)航跳轉(zhuǎn)，，等，一般用于頁(yè)面的修改。 談?wù)勀銓?duì)MVVM開(kāi)發(fā)模式的理解 MVVM分為Model、View、ViewModel三者。Model 代表數(shù)據(jù)模型，數(shù)據(jù)和業(yè)務(wù)邏輯都在Model層中定義；View 代表UI視圖，負(fù)責(zé)數(shù)據(jù)的展示；...
摘要：該內(nèi)的內(nèi)容會(huì)根據(jù)路由的變化而變化。配置，用來(lái)定義路由規(guī)則。由此我們就需要另一個(gè)第三方路由模塊，叫做，當(dāng)然它是基于開(kāi)發(fā)的。造成這種現(xiàn)象的最根本原因路由沒(méi)有明確的父子層級(jí)關(guān)系。監(jiān)聽(tīng)路由路由狀態(tài)發(fā)生改變時(shí)可以通過(guò)監(jiān)聽(tīng)，通過(guò)注入實(shí)現(xiàn)狀態(tài)的管理。 何為路由 路由機(jī)制運(yùn)可以實(shí)現(xiàn)多視圖的單頁(yè)Web應(yīng)用（single page web application，SPA）。 單頁(yè)應(yīng)用在使用期間不會(huì)重新加載...
摘要：我們通常通過(guò)其區(qū)分大小寫的規(guī)范化名稱例如，來(lái)定義指令。在其目前的實(shí)現(xiàn)上，我們應(yīng)該需要去創(chuàng)建一些不同點(diǎn)控制器用來(lái)重用這個(gè)指令。如此，綁定是理想的將回調(diào)函數(shù)綁定到指令行為。這被指令調(diào)用指明。前綴表示該指令在其父元素上搜索控制 文檔翻譯至angularjs.org. 文檔解釋了您何時(shí)想在AngularJS應(yīng)用程序中創(chuàng)建自己的指令，以及如何實(shí)現(xiàn)它們。 | 建議搭配原文食用 | 什么是指令？ 在...
閱讀 3677·2021-09-24 09:48
閱讀 1180·2021-09-10 10:51
閱讀 3362·2019-08-30 13:03
閱讀 3400·2019-08-30 12:51
閱讀 1451·2019-08-30 11:22
閱讀 1161·2019-08-29 18:38
閱讀 2125·2019-08-29 16:41
閱讀 3335·2019-08-29 15:32
