博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
angularJs--$on、$emit和$broadcast的使用
阅读量:4837 次
发布时间:2019-06-11

本文共 1782 字,大约阅读时间需要 5 分钟。

  • $emit只能向parent controller传递event与data
  • $broadcast只能向child controller传递event与data
  • $on用于接收event与data

例子如下

html代码

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中通信要方便许多~~

 

 

 

转载于:https://www.cnblogs.com/huangshoushi/p/5995128.html

你可能感兴趣的文章
div水平居中与垂直居中的方法【摘自美浩工作室官方博客 】
查看>>
UITableView 滚动条
查看>>
Android已有的原生Camera框架中加入自己的API的实现方案。
查看>>
Learn python the ninth day
查看>>
Debian+Django+uWsgi+nginx+mysql+celery
查看>>
招聘新人,自我介绍,你注意了吗?
查看>>
IOS 霓虹灯简单小程序
查看>>
Problem 11
查看>>
js原型和构造函数混合模式
查看>>
C#中的 .NET 弱事件模式
查看>>
100道C#面试题(.net开发人员必备)
查看>>
游戏中有限状态机实现
查看>>
LeetCode Trim a Binary Search Tree
查看>>
C++ Primer 笔记——固有的不可移植的特性
查看>>
omnibus一键安装gitlab
查看>>
Java8新特性:Lambda——方法引用与构造器引用
查看>>
类的无参方法(2)
查看>>
canvas 绘制环形进度条
查看>>
HDU 1711 Number Sequence(KMP裸题,板子题,有坑点)
查看>>
COGS 862. 二进制数01串【dp+经典二分+字符串】
查看>>