AngularJS的学习--$on、$emit和$broadcast的使用
AngularJS的学习--$on、$emit和$broadcast的使用原文地址:http://www.cnblogs.com/CraryPrimitiveMan/p/3679552.html AngularJS中的作用域有一个非常有层次和嵌套分明的结构。其中它们都有一个主要的 那么在这种情况下,如何在作用域之间通信呢?其中一个选择就是在应用程序作用域之中创建一个单例服务,然后通过这个服务处理所有子作用域的通信。 在AngularJS中还有另外一个选择:通过作用域中的事件处理通信。但是这种方法有一些限制;例如,你并不能广泛的将事件传播到所有监控的作用域中。你必须选择是否与父级作用域或者子作用域通信。 $on、$emit和$broadcast使得event、data在controller之间的传递变的简单。
例子如下 <divng-controller="ParentCtrl"><!--父级--> <divng-controller="SelfCtrl"><!--自己--> <ang-click="click()">clickme</a> <divng-controller="ChildCtrl"></div><!--子级--> </div> <divng-controller="BroCtrl"></div><!--平级--></div> app.controller('SelfCtrl',function($scope){ $scope.click=function(){ $scope.$broadcast('to-child','child'); $scope.$emit('to-parent','parent'); } }); app.controller('ParentCtrl',function($scope){ $scope.$on('to-parent',function(event,data){ console.log('ParentCtrl',data);//父级能得到值}); $scope.$on('to-child',data);//子级得不到值}); }); app.controller('ChildCtrl',function($scope){ $scope.$on('to-child',data){ console.log('ChildCtrl',data);//子级能得到值}); $scope.$on('to-parent',data);//父级得不到值}); }); app.controller('BroCtrl',data){ console.log('BroCtrl',data);//平级得不到值}); $scope.$on('to-child',data);//平级得不到值}); }); 最终结果 ParentCtrl parent $emit和$broadcast可以传多个参数,$on也可以接收多个参数。 在$on的方法中的event事件参数,其对象的属性和方法如下
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |