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