? 在Angularjs開發(fā)一些經(jīng)驗(yàn)總結(jié)隨筆中提到我們需要按照業(yè)務(wù)卻分angular controller，避免過(guò)大無(wú)所不能的上帝controller，我們把controller分離開了，但是有時(shí)候我們需要在controller中通信，一般為比較簡(jiǎn)單的通信機(jī)制，告訴同伴controller我的某個(gè)你所關(guān)心的東西改變了，怎么辦？如果你是一個(gè)javascript程序員你會(huì)很自然的想到異步回調(diào)響應(yīng)式通信—事件機(jī)制(或消息機(jī)制)。對(duì)，這就是angularjs解決controller之間通信的機(jī)制，所推薦的唯一方式，簡(jiǎn)而言之這就是angular way。

????? Angularjs為在scope中為我們提供了冒泡和隧道機(jī)制，$broadcast會(huì)把事件廣播給所有子controller，而$emit則會(huì)將事件冒泡傳遞給父controller，$on則是angularjs的事件注冊(cè)函數(shù)，有了這一些我們就能很快的以angularjs的方式去解決angularjs controller之間的通信，代碼如下：

View:

<div?ng-app="app"?ng-controller="parentCtr">?

????<div?ng-controller="childCtr1">name?:?

????????<input?ng-model="name"?type="text"?ng-change="change(name);"?/>?

????</div>?

????<div?ng-controller="childCtr2">Ctr1?name:?

????????<input?ng-model="ctr1Name"?/>?

????</div>?

</div>?

Controller:

angular.module("app",?[]).controller("parentCtr",?

function?($scope)?{?

????$scope.$on("Ctr1NameChange",?

??

????function?(event,?msg)?{?

????????console.log("parent",?msg);?

????????$scope.$broadcast("Ctr1NameChangeFromParrent",?msg);?

????});?

}).controller("childCtr1",?function?($scope)?{?

????$scope.change?=?function?(name)?{?

????????console.log("childCtr1",?name);?

????????$scope.$emit("Ctr1NameChange",?name);?

????};?

}).controller("childCtr2",?function?($scope)?{?

????$scope.$on("Ctr1NameChangeFromParrent",?

??

????function?(event,?msg)?{?

????????console.log("childCtr2",?msg);?

????????$scope.ctr1Name?=?msg;?

????});?

});?

??????這里childCtr1的name改變會(huì)以冒泡傳遞給父controller，而父controller會(huì)對(duì)事件包裝在廣播給所有子controller，而childCtr2則注冊(cè)了change事件，并改變自己。注意父controller在廣播時(shí)候一定要改變事件name。

jsfiddle鏈接：http://jsfiddle.net/whitewolf/5JBA7/15/

本文轉(zhuǎn)自 破狼 51CTO博客，原文鏈接：http://blog.51cto.com/whitewolfblog/1179536，如需轉(zhuǎn)載請(qǐng)自行聯(lián)系原作者

總結(jié)

以上是生活随笔為你收集整理的Angularjs Controller 间通信机制的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。