Angular中$broadcast和$emit的使用方法
要在控制器之間傳遞變量變化需要使用angular中的$broadcast和$emit方法來傳遞，同時使用$on來接收事件並作出響應。
broadcast譯為廣播，即上級傳遞下級。
示例代碼：
<script src="../angular.js"></script> <script> angular.module("app", []) .controller("child", function($scope) { $scope.$on("parentChange", function(e, m) { $scope.change= "changed"; $scope.child = m; }) }) .controller("parent", function($scope) { $scope.$watch("parent", function(n, o) { if (n == o) { return; } $scope.$broadcast("parentChange", n) }) }) </script><body> <div ng-controller="parent"> Parent: {{parent}} <input type="text" ng-model="parent"> <div ng-controller="child"> {{change}} Child: {{child}} </div> </div> </body>
上述代碼使用$watch監聽parent的值的變化，當發生變化時就會“廣播”出parentChange事件並傳遞了參數（輸入框的值），此時子元素作用域中使用了$scope.$on("parentChange, handler)"
emit譯為發射，即下級傳遞上級。
示例代碼：
<script src="../angular.js"></script> <script> angular.module("app", []) .controller("parent", function($scope) { $scope.$on("childChange", function(e, m) { $scope.change = "changed"; $scope.parent = m }) }) .controller("child", function($scope) { $scope.$watch("child", function(n, o) { if (n == o) { return; } $scope.$emit("childChange", n) }) }) </script> <body ng-controller="parent"> {{change}} Parent: {{parent}} <div ng-controller="child"> Child: {{child}} <input type="text" ng-model="child"> </div> </body>
當子元素的child值發生變化時，會向上級發出childChange事件，此時父元素正在監聽的$on(“childChange”)會做出響應，將傳遞的參數賦值給parent，整個流程與 broadcast類似。
上述作用域均存在層級關系，如果對於同級的作用域該如何做呢？
我們可以使用服務來廣播事件：
<script src="../angular.js"></script> <script> angular.module("app", []) .service("myServive", function($rootScope) { return { change: function(n) { $rootScope.$broadcast("valueChange", n); } } }) .controller("bro1", function($scope, myServive) { $scope.$watch("value1", function(n) { myServive.change(n); }) $scope.$on("valueChange", function(e, m) { console.log("value1"); $scope.value1 = m; }) }) .controller("bro2", function($scope, myServive) { $scope.$watch("value2", function(n) { myServive.change(n); }) $scope.$on("valueChange", function(e, m) { console.log("value2"); $scope.value2 = m; }) }) </script> <body> <div ng-controller="bro1"> <h3> value1:</h3> <input type="text" ng-model="value1"> </div> <div ng-controller="bro2"> <h3>value2:</h3> <input type="text" ng-model="value2"> </div> </body>
我們在服務中運用了$rootScope，所有的作用域都從屬於它，基於這點，我們可以在根作用域中廣播事件，$rootScope.$broadcast("valueChange", n);，當每個子作用域中的值發生變化時我們都會調用服務中的change 方法來廣播這個事件，同時每個作用域又都在監聽$on("valueChange") 事件並作出相應處理，這樣就實現了子作用域中的值會傳遞給兄弟作用域了。
更多參考：
http://brandonclapp.com/using-angularjs-services-to-broadcast-messages-between-controllers/
http://www.codelord.net/2015/05/04/angularjs-notifying-about-changes-from-services-to-controllers/
Angular中$broadcast和$emit的使用方法