<style>
div{border:1px solid #ff7300;padding:20px;margin:10px;border-radius: 5px;}
</style>
<div ng-controller="ParentController"><!--父级-->
<div ng-click="clkP()">click--给child</div>
<div ng-controller="OneSelfController"><!--自己-->
<span ng-click="clkme()">click me</span>
<div ng-controller="ChildController">
它是OneSelfController的子级
</div><!--子级-->
</div>
<div ng-controller="siblingsController">
它与OneSelfController是平级
</div><!--平级-->
</div>
<script>
var app=angular.module('firstApp',[]);//app模块名
app.controller('OneSelfController',function($scope){
$scope.clkme=function(){
$scope.$broadcast('sendChild','我给子控制器传递数据');
$scope.$emit('sendParent','冒泡到父元素')
}
}).controller('ParentController',function($scope){
$scope.$on('sendParent',function(event,data){//监听在子控制器中定义的 sendParent 事件
console.log('OneSelfController传过来的',data,event.name,event);//事件名称:sendParent
});
$scope.clkP=function(){
$scope.$broadcast('sendAllChild','让siblingsController接收到');
}
}).controller('ChildController', function($scope){
$scope.$on('sendChild', function(event,data) {//监听在子控制器中定义的 sendChild 事件
console.log('ChildCtrl', data,event.name,event);// 事件名称:sendChild
});
}).controller('siblingsController', function($scope){
$scope.$on('sendAllChild',function(event,data) {
console.log('值过来吧', data);
});
//下面事件不会触发
$scope.$on('sendParent', function(event,data) {
console.log('平级得不到值', data);
});
$scope.$on('sendChild', function(event,data) {
console.log('平级得不到值', data);
});
});
</script>