转载 

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

分类:    837人阅读    IT小君  2015-09-15 21:34

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

最终结果

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了。。。

点击广告,支持我们为你提供更好的服务

js+css3抽奖转盘旋转点餐代码

canvas炫酷鼠标移动文字粒子特效

html5图标下拉搜索框自动匹配代码

html5 canvas彩色碎片组合球形旋转动画特效

css鼠标跟随文字模糊特效

网页设计开发公司网站模板

现代时尚家具公司网站模板

css+js实现的颜色渐变数字时钟动画特效

中小型创意设计服务公司网站模板

HTML5 Canvas竖直流动线条背景动画特效

HTML5数字产品服务公司网站模板

小众时尚单品在线电子商务网站模板

有机水果蔬菜HTML5网站模板

响应式时尚单品在线商城网站模板

jQuery右端悬浮带返回顶部特效

响应式太阳能能源公司网站模板

HTML5现代家居装潢公司网站模板

html5 canvas进度条圆环图表统计动画特效

html5 svg夜空中星星流星动画场景特效

响应式咖啡饮品宣传网站模板

点击广告,支持我们为你提供更好的服务
 工具推荐 更多»
点击广告,支持我们为你提供更好的服务