Angular中Controller之间的信息传递(第二种办法):$emit,$broadcast,$on
-
- $emit只能向parent controller传递event与data( $emit(name, args) )
- $broadcast只能向child controller传递event与data( $broadcast(name, args) )
- $on用于接收event与data( $on(name, listener) )
<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:
var app = angular.module('myApp', []); 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); //平级得不到值 }); });
登录后复制点击click运行结果:
ChildCtrl child controller.
ParentCtrl parent在$on的方法中的event事件参数,其对象的属性和方法如下
事件属性 目的 event.targetScope 发出或者传播原始事件的作用域 event.currentScope 目前正在处理的事件的作用域 event.name 事件名称 event.stopPropagation() 一个防止事件进一步传播(冒泡/捕获)的函数(这只适用于使用`$emit`发出的事件) event.preventDefault() 这个方法实际上不会做什么事,但是会设置`defaultPrevented`为true。直到事件监听器的实现者采取行动之前它才会检查`defaultPrevented`的值。 event.defaultPrevented 如果调用了`preventDefault`则为true 标签: Angularjs
以上是Angular中Controller之间的信息传递(第二种办法):$emit,$broadcast,$on的详细内容。更多信息请关注PHP中文网其他相关文章!

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

传递优化是帮助Windows更新和Windows应用商店更快地运行和交付更新的功能。传递优化中的缓存文件应该在一段时间后删除,但对于我们的一些读者来说,它们不断堆积并占用不必要的空间。删除传递优化文件是否安全?是的,删除传递优化文件是安全的,在本文中,您会发现在Windows11中这样做非常容易。尽管不建议手动删除传递优化文件,但可以自动执行此操作。如何删除Windows11上的传递优化文件?单击搜索栏,键入磁盘清理,然后从结果中打开该工具。如果您有多个驱动器,请选择带有系统的驱动器(通常是C:

SpringBoot小白创建项目,扫描不到Controller一系列问题1.2.3.4.5.6.还有一种办法是在启动服务类的入门,添加@ComponentScan(basePackages={“xxx.xxx.xx”,“xxx.xxx.xx”})里面的是包的全限定名,可以为多个SpringBoot自定义controller无法扫描到SpringBoot自定义controller路由找不到,原因是启动类和自定义的Controller包不在同一级目录下。官方建议application.java放的位

Angular.js是一种可自由访问的JavaScript平台,用于创建动态应用程序。它允许您通过扩展HTML的语法作为模板语言,以快速、清晰地表示应用程序的各个方面。Angular.js提供了一系列工具,可帮助您编写、更新和测试代码。此外,它还提供了许多功能,如路由和表单管理。本指南将讨论在Ubuntu24上安装Angular的方法。首先,您需要安装Node.js。Node.js是一个基于ChromeV8引擎的JavaScript运行环境,可让您在服务器端运行JavaScript代码。要在Ub

本篇文章带大家深入了解一下angular的状态管理器NgRx,介绍一下NgRx的使用方法,希望对大家有所帮助!

angular中怎么使用monaco-editor?下面本篇文章记录下最近的一次业务中用到的 monaco-editor 在 angular 中的使用,希望对大家有所帮助!

Angular项目过大,怎么合理拆分它?下面本篇文章给大家介绍一下合理拆分Angular项目的方法,希望对大家有所帮助!

怎么自定义angular-datetime-picker格式?下面本篇文章聊聊自定义格式的方法,希望对大家有所帮助!
