AngularJS开发教程之控制器之间的通信方法分析
本文实例讲述了AngularJS开发教程之控制器之间的通信方法。分享给大家供大家参考，具体如下：
一、指令与控制器之间通信，无非是以下几种方法：
基于scope继承的方式
基于event传播的方式
service的方式（单例模式）
二、基于scope继承的方式：
最简单的让控制器之间进行通信的方法是通过scope的继承。假设有两个控制器Parent、Child，Child在Parent内，那Child可以称为控制器Parent的子控制器，它将继承父控制器Parent的scope。这样，Child就可以访问到Parent的scope中的所有函数和变量了。
需要注意的是，由于scope的继承是基于Js的原型继承，如果变量是基本类型的，那在Child中的修改（写），有可能会导致Parent中的数据变脏。
例子：
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>基于scope继承的方式</title>
</head>
<bodyng-app="myApp">
<divng-controller="parent">
<p>引用类型：{{obj.value}}</p>
<p>引用类型：{{value}}</p>
<ahref="javascript:;"ng-click="parent('parent')">点我</a>
<divng-controller="child">
<p>引用类型：{{obj.value}}</p>
<p>引用类型：{{value}}</p>
<ahref="javascript:;"ng-click="child('child')">点我</a>
</div>
</div>
<scripttype="text/javascript"src='http://cdn.staticfile.org/angular.js/1.3.0-beta.13/angular.min.js'></script>
<script>
varapp=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>
三、基于事件的方式：
在一般情况下基于继承的方式已经足够满足大部分情况了，但是这种方式没有实现兄弟控制器之间的通信方式，所以引出了事件的方式。基于事件的方式中我们可以里面作用的on,on,emit,boardcast这几个方式来实现，其中boardcast这几个方式来实现，其中on表示事件监听，emit表示向父级以上的作用域触发事件，emit表示向父级以上的作用域触发事件，boardcast表示向子级以下的作用域广播事件。
子到父通过$emit注册事件，例子：
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>基于事件传播子到父</title>
</head>
<bodyng-app="myApp">
<h3>$on,$emit,$boardcast这几个方式来实现，其中$on表示事件监听，$emit表示向父级以上的作用域触发事件，$boardcast表示向子级以下的作用域广播事件</h3>
<divng-controller="parent">
<p>引用类型：{{value}}</p>
<divng-controller="child">
<ahref="javascript:;"ng-click="child('child')">子传值到父</a>
</div>
</div>
<scripttype="text/javascript"src='http://cdn.staticfile.org/angular.js/1.3.0-beta.13/angular.min.js'></script>
<script>
varapp=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注册事件，但其实感觉有点多余，本事父就是可以共享给子的，例子：
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>基于事件传播父到子</title>
</head>
<bodyng-app="myApp">
<h3>$on,$emit,$boardcast这几个方式来实现，其中$on表示事件监听，$emit表示向父级以上的作用域触发事件，$boardcast表示向子级以下的作用域广播事件</h3>
基于事件传播父到子，这里本事父就可以到子，感觉有点多余
<divng-controller="parent">
<ahref="javascript:;"ng-click="parent('child')">子传值到父</a>
<divng-controller="child">
<p>引用类型：{{value}}</p>
</div>
</div>
<scripttype="text/javascript"src='http://cdn.staticfile.org/angular.js/1.3.0-beta.13/angular.min.js'></script>
<script>
varapp=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给所有孩子这个相同的信息，当然发出信息的那个可以选择是否要忽略掉自己发出的信息
四、angular服务的方式：
在ng中服务是一个单例，所以在服务中生成一个对象，该对象就可以利用依赖注入的方式在所有的控制器中共享。参照以下例子，在一个控制器修改了服务对象的值，在另一个控制器中获取到修改后的值：
varapp=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：
<divng-controller="MainCtrl">
<inputtype="text"ng-model="test"/>
<divng-click="change()">clickme</div>
</div>
<divng-controller="sideCtrl">
<divng-click="add()">myname{{name}}</div>
</div>
更多关于AngularJS相关内容感兴趣的读者可查看本站专题：《AngularJS入门与进阶教程》及《AngularJSMVC架构总结》
希望本文所述对大家AngularJS程序设计有所帮助。