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:

 

  
<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改變會以冒泡傳遞給父controller，而父controller會對事件封裝在廣播給所有子controller，而childCtr2則註冊了change事件，並改變自己。注意父controller在廣播時候一定要改變事件name。jsfiddle連結：http://jsfiddle.net/whitewolf/5JBA7/15/

本文出自 “破狼” 部落格，請務必保留此出處http://whitewolfblog.blog.51cto.com/3973901/1179536