AngularJS的学习--$on、$emit和$broadcast的使用
来源:互联网 发布:剑网3成男捏脸数据分享 编辑:程序博客网 时间:2024/05/17 11:06
AngularJS中的作用域有一个非常有层次和嵌套分明的结构。其中它们都有一个主要的$rootScope
(也就说对应的Angular应用或者ng-app
),然后其他所有的作用域部分都是继承自这个$rootScope
的,或者说都是嵌套在主作用域下面的。很多时候,你会发现这些作用域不会共享变量或者说都不会从另一个原型继承什么。
那么在这种情况下,如何在作用域之间通信呢?其中一个选择就是在应用程序作用域之中创建一个单例服务,然后通过这个服务处理所有子作用域的通信。
在AngularJS中还有另外一个选择:通过作用域中的事件处理通信。但是这种方法有一些限制;例如,你并不能广泛的将事件传播到所有监控的作用域中。你必须选择是否与父级作用域或者子作用域通信。
$on、$emit和$broadcast使得event、data在controller之间的传递变的简单。
- $emit只能向parent controller传递event与data
- $broadcast只能向child controller传递event与data
- $on用于接收event与data
例子如下
html代码
<div ng-controller="ParentCtrl"> <!--父级--> <div ng-controller="SelfCtrl"> <!--自己--> <a ng-click="click()">click me</a> <div ng-controller="ChildCtrl"></div> <!--子级--> </div> <div ng-controller="BroCtrl"></div> <!--平级--></div>
js代码
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', function(event,data) { console.log('ParentCtrl', data); //子级得不到值 });});app.controller('ChildCtrl', function($scope){ $scope.$on('to-child', function(event,data) { console.log('ChildCtrl', data); //子级能得到值 }); $scope.$on('to-parent', function(event,data) { console.log('ChildCtrl', data); //父级得不到值 });});app.controller('BroCtrl', function($scope){ $scope.$on('to-parent', function(event,data) { console.log('BroCtrl', data); //平级得不到值 }); $scope.$on('to-child', function(event,data) { console.log('BroCtrl', data); //平级得不到值 }); });
最终结果
ParentCtrl parent
ChildCtrl child
$emit和$broadcast可以传多个参数,$on也可以接收多个参数。
在$on的方法中的event事件参数,其对象的属性和方法如下
0 0
- AngularJS的学习--$on、$emit和$broadcast
- AngularJS的 $on、$emit和$broadcast使用
- AngularJS $on、$emit和$broadcast的使用
- AngularJS $on、$emit和$broadcast的使用
- AngularJS的学习 $on、$emit和$broadcast的使用
- AngularJS的学习--$on、$emit和$broadcast的使用
- AngularJS的学习 $on、$emit和$broadcast的使用
- AngularJS的学习--$on、$emit和$broadcast的使用
- AngularJS的学习--$on、$emit和$broadcast的使用
- AngularJS的学习--$on、$emit和$broadcast的使用
- AngularJS的学习--$on、$emit和$broadcast的使用
- AngularJS的学习--$on、$emit和$broadcast的使用
- AngularJS的学习--$on、$emit和$broadcast的使用
- AngularJS的学习--$on、$emit和$broadcast的使用
- AngularJS的学习--$on、$emit和$broadcast的使用
- AngularJS的学习--$on、$emit和$broadcast的使用
- AngularJS的学习--$on、$emit和$broadcast的使用
- AngularJS的学习--$on、$emit和$broadcast的使用
- 欢迎使用CSDN-markdown编辑器
- C/C++内存泄漏及检测
- org.springframework.validation.BindException问题解决
- Hadoop DataNode, NameNode无法启动
- vim使用 命令总结及实例
- AngularJS的学习--$on、$emit和$broadcast的使用
- java接口和抽象类
- swift正则表达式
- UIAlertView和UIAlertController那点事儿
- jQuery 之 get、getJSON 与 getScript 方法(13)
- POJ1065——Wooden Sticks(动态规划,二分优化)
- Java如何判断线程池所有任务是否执行完毕
- AngularJS常用插件与指令收集
- Google论文系列(2) MapReduce