本文實例講述了AngularJS開發(fā)教程之控制器之間的通信方法。分享給大家供大家參考，具體如下：
一、指令與控制器之間通信，無非是以下幾種方法：
基于scope繼承的方式
基于event傳播的方式
service的方式（單例模式）
二、基于scope繼承的方式：
最簡單的讓控制器之間進(jìn)行通信的方法是通過scope的繼承。假設(shè)有兩個控制器Parent、Child，Child 在 Parent 內(nèi)，那Child 可以稱為控制器Parent的子控制器，它將繼承父控制器Parent的scope。這樣，Child就可以訪問到Parent的scope中的所有函數(shù)和變量了。
需要注意的是，由于scope的繼承是基于Js的原型繼承，如果變量是基本類型的，那在Child中的修改（寫），有可能會導(dǎo)致Parent中的數(shù)據(jù)變臟。
例子：
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>基于scope繼承的方式</title></head><body ng-app = "myApp"> <div ng-controller = "parent"> <p>引用類型：{{obj.value}}</p> <p>引用類型：{{value}}</p> <a href="javascript:;" ng-click = "parent('parent')">點我</a> <div ng-controller="child"> <p>引用類型：{{obj.value}}</p> <p>引用類型：{{value}}</p> <a href="javascript:;" ng-click = "child('child')">點我</a> </div> </div> <script type="text/javascript" src='http://cdn.staticfile.org/angular.js/1.3.0-beta.13/angular.min.js'></script> <script> var app = angular.module("myApp",[],function(){console.log("start")}); app.controller("parent",function($scope){ $scope.parent = function(newchild){ // 這里不能都單獨寫成$scope.obj={value:newchild} $scope.obj={value:newchild}; $scope.value = newchild; } }); app.controller("child",function($scope){ $scope.child = function(newchild){ $scope.value = newchild; $scope.obj.value=newchild; } }); </script></body></html>三、基于事件的方式：
在一般情況下基于繼承的方式已經(jīng)足夠滿足大部分情況了，但是這種方式?jīng)]有實現(xiàn)兄弟控制器之間的通信方式，所以引出了事件的方式 。基于事件的方式中我們可以里面作用的on,on,emit,boardcast這幾個方式來實現(xiàn)，其中boardcast這幾個方式來實現(xiàn)，其中on表示事件監(jiān)聽，emit表示向父級以上的作用域觸發(fā)事件，emit表示向父級以上的作用域觸發(fā)事件，boardcast表示向子級以下的作用域廣播事件。
子到父 通過 $emit 注冊事件，例子：
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>基于事件傳播子到父</title></head><body ng-app = "myApp"> <h3>$on,$emit,$boardcast這幾個方式來實現(xiàn)，其中$on表示事件監(jiān)聽，$emit表示向父級以上的 作用域觸發(fā)事件， $boardcast表示向子級以下的作用域廣播事件</h3> <div ng-controller = "parent"> <p>引用類型：{{value}}</p> <div ng-controller="child"> <a href="javascript:;" ng-click = "child('child')">子傳值到父</a> </div> </div> <script type="text/javascript" src='http://cdn.staticfile.org/angular.js/1.3.0-beta.13/angular.min.js'></script> <script> var app = angular.module("myApp",[],function(){console.log("start")}); app.controller("parent",function($scope){ $scope.$on("pfan",function(e,data){ $scope.value = data; }) }); app.controller("child",function($scope){ $scope.child = function(newchild){ $scope.value = newchild; $scope.$emit("pfan",$scope.value) } }); </script></body></html>父到子通過$broadcast注冊事件，但其實感覺有點多余，本事父就是可以共享給子的，例子：
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>基于事件傳播父到子</title></head><body ng-app = "myApp"> <h3>$on,$emit,$boardcast這幾個方式來實現(xiàn)，其中$on表示事件監(jiān)聽，$emit表示向父級以上的 作用域觸發(fā)事件， $boardcast表示向子級以下的作用域廣播事件</h3> 基于事件傳播父到子，這里本事父就可以到子，感覺有點多余 <div ng-controller = "parent"> <a href="javascript:;" ng-click = "parent('child')">子傳值到父</a> <div ng-controller="child"> <p>引用類型：{{value}}</p> </div> </div> <script type="text/javascript" src='http://cdn.staticfile.org/angular.js/1.3.0-beta.13/angular.min.js'></script> <script> var app = angular.module("myApp",[],function(){console.log("start")}); app.controller("parent",function($scope){ $scope.parent = function(newchild){ $scope.value = newchild; $scope.$broadcast("pfan",$scope.value) } }); app.controller("child",function($scope){ $scope.$on("pfan",function(e,data){ $scope.value = data; }) }); </script></body></html>同級之間
擁有同個父scope的子級scope之間，也就是兄弟/相鄰scope之間的通信，其實是借助共同父級傳遞消息的：
子級scope中有誰想傳消息了，emit一個給“奶爸”然后通過“奶爸”emit一個給“奶爸”然后通過“奶爸”broadcast 給所有孩子這個相同的信息，當(dāng)然發(fā)出信息的那個可以選擇是否要忽略掉自己發(fā)出的信息
四、angular服務(wù)的方式：
在ng中服務(wù)是一個單例，所以在服務(wù)中生成一個對象，該對象就可以利用依賴注入的方式在所有的控制器中共享。參照以下例子，在一個控制器修改了服務(wù)對象的值，在另一個控制器中獲取到修改后的值：
var app = angular.module('myApp', []);app.factory('instance', function(){ return {};});app.controller('MainCtrl', function($scope, instance) { $scope.change = function() { instance.name = $scope.test; };});app.controller('sideCtrl', function($scope, instance) { $scope.add = function() { $scope.name = instance.name; };});html：
<div ng-controller="MainCtrl"> <input type="text" ng-model="test" /> <div ng-click="change()">click me</div></div><div ng-controller="sideCtrl"> <div ng-click="add()">my name {{name}}</div></div>更多關(guān)于AngularJS相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《AngularJS入門與進(jìn)階教程》及《AngularJS MVC架構(gòu)總結(jié)》
希望本文所述對大家AngularJS程序設(shè)計有所幫助。
新聞熱點
疑難解答
