Angularjs Controller 间通讯机制

      在Angularjs开发一些经验总结随 笔中提到咱们须要按照业务却分angular controller，避免过大无所不能的上帝controller，咱们把controller分离开了，可是有时候咱们须要在controller中 通讯，通常为比较简单的通讯机制，告诉同伴controller个人某个你所关心的东西改变了，怎么办？若是你是一个javascript程序员你会很自 然的想到异步回调响应式通讯—事件机制(或消息机制)。对，这就是angularjs解决controller之间通讯的机制，所推荐的惟一方式，简而言 之这就是angular way。

      Angularjs为在scope中为咱们提供了冒泡和隧道机制，$broadcast会把事件广播给全部子controller，而$emit则会将事 件冒泡传递给父controller，$on则是angularjs的事件注册函数，有了这一些咱们就能很快的以angularjs的方式去解决 angularjs controller之间的通讯，代码以下：

View:

1 <div ng-app="app" ng-controller="parentCtr"> 2 <div ng-controller="childCtr1">name : 3 <input ng-model="name" type="text" ng-change="change(name);" /> 4 </div> 5 <div ng-controller="childCtr2">Ctr1 name: 6 <input ng-model="ctr1Name" /> 7 </div> 8 </div>

Controller:

 1 angular.module("app", []).controller("parentCtr",  2 function ($scope) {  3 $scope.$on("Ctr1NameChange",  4  5 function (event, msg) {  6 console.log("parent", msg);  7 $scope.$broadcast("Ctr1NameChangeFromParrent", msg);  8  });  9 }).controller("childCtr1", function ($scope) { 10 $scope.change = function (name) { 11 console.log("childCtr1", name); 12 $scope.$emit("Ctr1NameChange", name); 13  }; 14 }).controller("childCtr2", function ($scope) { 15 $scope.$on("Ctr1NameChangeFromParrent", 16 17 function (event, msg) { 18 console.log("childCtr2", msg); 19 $scope.ctr1Name = msg; 20  }); 21 });

      这里childCtr1的name改变会以冒泡传递给父controller，而父controller会对事件包装在广播给全部子 controller，而childCtr2则注册了change事件，并改变本身。注意父controller在广播时候必定要改变事件name。

jsfiddle连接：http://jsfiddle.net/whitewolf/5JBA7/