angular的继承作用域通信
本人学了一段时间的angular，angular之间怎样通信，我就总结以下几点，如果有哪位大神认为不对，敬请赐教。
1、父子之间的作用域进行通信
html
<div ng-controller="Parent">
{{name}} //Parent
<div ng-controller="child">
{{name}} //Parent
</div>
</div>
js
m1.controller("Parent",["$scope",function($scope){
$scope.name = "Parent";
}])
m1.controller("child",["$scope",function($scope){
}])
2、$rootScope 挂在全局作用域上，适用范围更广
html
<div ng-controller="myCtrl">
{{name}} //Parent
<div ng-controller="Parent">
{{name}} //Parent
<div ng-controller="child">
{{name}} //Parent
</div>
</div>
</div>
js
m1.controller("Parent",["$scope","$rootScope",function($scope,$rootScope){
$scope.name = "Parent";
$rootScope.name = $scope.name;
}])
m1.controller("child",["$scope",function($scope){
}])
3、基于事件的数据传递 组件 webcomponent
html
<div ng-controller="Parent">
<input type="text" ng-model="name" ng-change="change()">
<div ng-controller="child">
<input type="text" ng-model="name" ng-change="change()">
</div>
<div ng-controller="secChild">
<input type="text" ng-model="name">
</div>
</div>
js
m1.controller("Parent",["$scope","$rootScope",function($scope,$rootScope){
// 监听 发送消息 $emit
$scope.$on("changeName",function(event,data){
console.log(data);
//$broadcast 广播 广播只有子级和自己知道，父级（就是Parent更上级）不知道
$scope.$broadcast("sendName",data);
})
//监听 $broadcast 广播发送的消息
$scope.$on("sendName",function(event,data){
console.log(data);
$scope.name = data;
})
}])
m1.controller("child",["$scope",function($scope){
$scope.name = "第一个孩子";
$scope.change = function(){
//$emit 发送 只能发送自己的父级
$scope.$emit("changeName","发送-》广播");
}
//监听 $broadcast 广播发送的消息
$scope.$on("sendName",function(event,data){
console.log(data);
$scope.name = data;
})
}])
m1.controller("secChild",["$scope",function($scope){
$scope.name = "第二个孩子";
//监听 $broadcast 广播发送的消息
$scope.$on("sendName",function(event,data){
console.log(data);
$scope.name = data;
})
}])
总结：$emit 发送消息，只能发送给自己的父级或者更上级（如：爷爷级）,使用监听（$on(监听的名字,function(event,data){ })）就能收到，自己以及自己的子级都不能发送；
$broadcast 广播消息 ，只能被自己或是自己的子级所监听（$on(监听的名字,function(event,data){ })）的到，父级或者更上级不能监听的到
4、service 没有作用域的概念
html
<body ng-controller="myCtrl">
<input type="text" ng-model="name" >
<div ng-controller="Parent">
<input type="text" ng-model="name" >
<div ng-controller="child">
<input type="text" ng-model="name" ng-change="change()">
</div>
<div ng-controller="secChild">
<input type="text" ng-model="name">
</div>
</div>
</body>
js
m1.controller("Parent",["$scope","$rootScope",function($scope,$rootScope){
}])
m1.controller("child",["$scope","myData",function($scope,myData){
//为什么 $scope.name = myData.name; 不能使上面的联动改变呢
//据我所知，我觉得 上面的 $scope.name 是赋值，物理地址也是一样的，就算html中<input>标签都有里面 ng-model="name"，
//这样是不会联动的，也就是说多个controller里面的物理地址不一样，
//如果是引用myData，$scope.data = myData; html中<input>标签都有里面 ng-model="name"，只是引用其中的数据，其他
//包括物理地址都不变，这样就可以联动
$scope.data = myData;
}])
m1.controller("secChild",["$scope","myData",function($scope,myData){
//为什么 $scope.name = myData.name; 不能使上面的联动改变呢
$scope.data = myData;
}])
m1.factory("myData",function(){
return{
name : "123"
}
})
总结：service与$emit、$broadcast、$on的区别，service没有作用域的概念；$emit、$broadcast、$on必须要清楚父子级以及作用域的范围。
