如何在作用域之间通信呢? 1.创建一个单例服务,然后通过这个服务处理所有子作用域的通信。 2.通过作用域中的事件处理通信。但是这种方法有一些限制;例如,你并不能广泛的将事件传播到所有监控的作用域中。你必须选择是否与父级作用域或者子作用域通信。什么是事件
- 如同浏览器响应浏览器层的事件,比如鼠标点击、获得焦点,angular应用也可以响应angular事件
- angular事件系统并不与浏览器的事件系统相通,我们只能在作用域上监听angular事件而不是DOM事件
事件传播
因为作用域是有层次的,所以我们可以在作用域链上传递事件:
使用$emit冒泡事件,事件从当前子作用域冒泡到赋作用域,在产生事件的作用域之上的所有作用域都会收到这个事件的通知
$emit()方法带有两个参数:name 要发出的事件的名称 args 一个参数集合,作为对象传递到事件监听器上
使用$broadcast向下传递事件,每个注册了监听器的子作用域都会收到这个信息
$broadcast()方法带有两个参数:name 要广播的事件的名称 args 一个参数集合,作为对象传递到事件监听器上
使用$on监听事件
$on()方法带有两个参数:event 事件对象 param 参数集合,$broadcast()、$emit()传递过来的参数集合
1 <style> 2 div{border:1px solid #ff7300;padding:20px;margin:10px;border-radius: 5px;} 3 </style> 4 <div ng-controller="ParentController"><!--父级--> 5 <div ng-click="clkP()">click--给child</div> 6 <div ng-controller="OneSelfController"><!--自己--> 7 <span ng-click="clkme()">click me</span> 8 <div ng-controller="ChildController"> 9 它是OneSelfController的子级 10 </div><!--子级--> 11 </div> 12 <div ng-controller="siblingsController"> 13 它与OneSelfController是平级 14 </div><!--平级--> 15 </div> 16 17 <script> 18 var app=angular.module('firstApp',[]);//app模块名 19 app.controller('OneSelfController',function($scope){ 20 $scope.clkme=function(){ 21 $scope.$broadcast('sendChild','我给子控制器传递数据'); 22 $scope.$emit('sendParent','冒泡到父元素') 23 } 24 }).controller('ParentController',function($scope){ 25 $scope.$on('sendParent',function(event,data){//监听在子控制器中定义的 sendParent 事件 26 console.log('OneSelfController传过来的',data,event.name,event);//事件名称:sendParent 27 }); 28 $scope.clkP=function(){ 29 $scope.$broadcast('sendAllChild','让siblingsController接收到'); 30 } 31 32 }).controller('ChildController', function($scope){ 33 $scope.$on('sendChild', function(event,data) {//监听在子控制器中定义的 sendChild 事件 34 console.log('ChildCtrl', data,event.name,event);// 事件名称:sendChild 35 }); 36 }).controller('siblingsController', function($scope){ 37 $scope.$on('sendAllChild',function(event,data) { 38 console.log('值过来吧', data); 39 }); 40 //下面事件不会触发 41 $scope.$on('sendParent', function(event,data) { 42 console.log('平级得不到值', data); 43 }); 44 $scope.$on('sendChild', function(event,data) { 45 console.log('平级得不到值', data); 46 }); 47 }); 48 49 </script>