AngularJS的学习--$on、$emit和$broadcast的使用

时间 2014-04-22 00:08:00 博客园精华区

原文 http://www.cnblogs.com/CraryPrimitiveMan/p/3679552.html

主题 AngularJS

$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 child

ChildCtrl parent

$emit和$broadcast可以传多个参数，$on也可以接收多个参数。

在$on的方法中的event事件参数，其对象的属性和方法如下

事件属性	目的
event.targetScope	发出或者传播原始事件的作用域
event.currentScope	目前正在处理的事件的作用域
event.name	事件名称
event.stopPropagation()	一个防止事件进一步传播(冒泡/捕获)的函数(这只适用于使用`$emit`发出的事件)
event.preventDefault()	这个方法实际上不会做什么事，但是会设置`defaultPrevented`为true。直到事件监听器的实现者采取行动之前它才会检查`defaultPrevented`的值。
event.defaultPrevented	如果调用了`preventDefault`则为true

感觉比service在不同controller中通信要方便许多~~

今天就到这里，本来是想早早睡觉的，结果整理了一下照片，再写完博客，又到12:00了。。。

AngularJS的学习--$on、$emit和$broadcast的使用 - 疯狂的原始人相关推荐

angularjs的$on、$emit、$broadcast
转... 如何在作用域之间通信呢? 1.创建一个单例服务,然后通过这个服务处理所有子作用域的通信. 2.通过作用域中的事件处理通信.但是这种方法有一些限制:例如,你并不能广泛的将事件传播到所有监控的作 ...
AngularJS的学习--$on、$emit和$broadcast的使用
来源:http://www.cnblogs.com/CraryPrimitiveMan/p/3679552.html AngularJS中的作用域有一个非常有层次和嵌套分明的结构.其中它们都有一个主要 ...
AngularJS进阶学习
参考:http://***/class/54f3ba65e564e50cfccbad4b 1. AJAX:Asynchronous JavaScript and XML(异步的 JavaScript ...
angularJs基础学习
实例化一个angularJs模块 <body class="hold-transition skin-red sidebar-mini" ng-app="app&q ...
AngularJS scope 学习
本文主要是学习别人的文章和回答之后的总结,此处给出链接深入学习AngularJS Scope JavaScript原型继承简介 AngularJs中是双向数据绑定,但并不是每次修改都会产生相应的效果, ...
AngularJS 整理学习
参考博客: https://blog.csdn.net/weixin_33178524/article/details/79179597 https://blog.csdn.net/qq_42128 ...
AngularJs入门学习
http://www.ituring.com.cn/article/13471 安装并配置好所有依赖环境之后,只需要在cmd进入angular-phonecat目录.接着指令操作npm start:开 ...
理解微信小程序Wepy框架的三个事件交互$broadcast，$emit，$invoke
$broadcast: $broadcast事件是由父组件发起,所有子组件都会收到此广播事件,除非事件被手动取消.事件广播的顺序为广度优先搜索顺序,如上图,如果页面Page_Index发起一个$bro ...
微信小程序Wepy框架的三个事件交互($broadcast，$emit，$invoke)
$broadcast: broadcast事件是由父组件发起,所有子组件都会收到此广播事件,除非事件被手动取消.事件广播的顺序为广度优先搜索顺序,如上图,如果页面PageIndex发起一个broadc ...
理解AngularJS的作用域Scope
为什么80%的码农都做不了架构师?>>> 理解AngularJS的作用域Scope https://github.com/angu- 08-02 22:45 10-14 09: ...

AngularJS的学习--$on、$emit和$broadcast的使用 - 疯狂的原始人

AngularJS的学习--$on、$emit和$broadcast的使用 - 疯狂的原始人相关推荐

最新文章

热门文章