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/