angularjs中父,子,兄之间controller值得传递

2024-03-01 12:58

本文主要是介绍angularjs中父,子,兄之间controller值得传递,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

在进行angularJs做前端数据绑定的时候,无疑是非常方便的。但是最近在开发的时候,老是因为各级controller之间的传递,而倍感烦恼。然后百度了下,看看官网。获得了各级controller之间的值通信方式。

我是使用$broadcast $emit $on来进行处理的:在一个controller里面通过事件触发一个方法,在方法里面通过$broadcast或$emit来定义一个变量,在父,子controller里面通过$on来获取。

下面写个demo吧,具体方法,可以自己查阅官网。

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:

phonecatControllers.controller('SelfCtrl', function($scope) {  $scope.click = function () {  $scope.$broadcast('to-child', 'child');  $scope.$emit('to-parent', 'parent');  }  });  phonecatControllers.controller('ParentCtrl', function($scope) {  $scope.$on('to-parent', function(d,data) {  console.log(data);         //父级能得到值  });  $scope.$on('to-child', function(d,data) {  console.log(data);         //子级得不到值  });  });  phonecatControllers.controller('ChildCtrl', function($scope){  $scope.$on('to-child', function(d,data) {  console.log(data);         //子级能得到值  });  $scope.$on('to-parent', function(d,data) {  console.log(data);         //父级得不到值  });  });  phonecatControllers.controller('BroCtrl', function($scope){  $scope.$on('to-parent', function(d,data) {  console.log(data);        //平级得不到值  });  $scope.$on('to-child', function(d,data) {  console.log(data);        //平级得不到值  });  });

console:

child  
parent 

注意:用$broadcast赋的值,只能子级得到值;$emit赋的值,只能父级得到;而平级的什么都不能得到。

 

这篇关于angularjs中父,子,兄之间controller值得传递的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/762520

相关文章

golang获取当前时间、时间戳和时间字符串及它们之间的相互转换方法

《golang获取当前时间、时间戳和时间字符串及它们之间的相互转换方法》:本文主要介绍golang获取当前时间、时间戳和时间字符串及它们之间的相互转换,本文通过实例代码给大家介绍的非常详细,感兴趣... 目录1、获取当前时间2、获取当前时间戳3、获取当前时间的字符串格式4、它们之间的相互转化上篇文章给大家介

Vue中组件之间传值的六种方式(完整版)

《Vue中组件之间传值的六种方式(完整版)》组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,针对不同的使用场景,如何选择行之有效的通信方式... 目录前言方法一、props/$emit1.父组件向子组件传值2.子组件向父组件传值(通过事件形式)方

Spring中@RestController和@Controller的使用及区别

《Spring中@RestController和@Controller的使用及区别》:本文主要介绍Spring中@RestController和@Controller的使用及区别,具有很好的参考价... 目录Spring中@RestController和@Controller使用及区别1. 基本定义2. 使

Python实现PDF与多种图片格式之间互转(PNG, JPG, BMP, EMF, SVG)

《Python实现PDF与多种图片格式之间互转(PNG,JPG,BMP,EMF,SVG)》PDF和图片是我们日常生活和工作中常用的文件格式,有时候,我们可能需要将PDF和图片进行格式互转来满足... 目录一、介绍二、安装python库三、Python实现多种图片格式转PDF1、单张图片转换为PDF2、多张图

WiFi6时代来临! 华三H3C NX54路由器还值得购买吗?

《WiFi6时代来临!华三H3CNX54路由器还值得购买吗?》WiFi6时代已经来临,众多路由器厂商也纷纷推出了兼容WiFi6协议的路由器,今天我们将深入体验H3CNX54路由器,这款由知名企业... 随着科技的发展,WiFi6逐渐走进了我们的日常生活之中,相比WiFi5来说,WiFi6拥有更高的带宽、更高

Java对象和JSON字符串之间的转换方法(全网最清晰)

《Java对象和JSON字符串之间的转换方法(全网最清晰)》:本文主要介绍如何在Java中使用Jackson库将对象转换为JSON字符串,并提供了一个简单的工具类示例,该工具类支持基本的转换功能,... 目录前言1. 引入 Jackson 依赖2. 创建 jsON 工具类3. 使用示例转换 Java 对象为

java父子线程之间实现共享传递数据

《java父子线程之间实现共享传递数据》本文介绍了Java中父子线程间共享传递数据的几种方法,包括ThreadLocal变量、并发集合和内存队列或消息队列,并提醒注意并发安全问题... 目录通过 ThreadLocal 变量共享数据通过并发集合共享数据通过内存队列或消息队列共享数据注意并发安全问题总结在 J

Java文件与Base64之间的转化方式

《Java文件与Base64之间的转化方式》这篇文章介绍了如何使用Java将文件(如图片、视频)转换为Base64编码,以及如何将Base64编码转换回文件,通过提供具体的工具类实现,作者希望帮助读者... 目录Java文件与Base64之间的转化1、文件转Base64工具类2、Base64转文件工具类3、

异步线程traceId如何实现传递

《异步线程traceId如何实现传递》文章介绍了如何在异步请求中传递traceId,通过重写ThreadPoolTaskExecutor的方法和实现TaskDecorator接口来增强线程池,确保异步... 目录前言重写ThreadPoolTaskExecutor中方法线程池增强总结前言在日常问题排查中,

Python调用另一个py文件并传递参数常见的方法及其应用场景

《Python调用另一个py文件并传递参数常见的方法及其应用场景》:本文主要介绍在Python中调用另一个py文件并传递参数的几种常见方法,包括使用import语句、exec函数、subproce... 目录前言1. 使用import语句1.1 基本用法1.2 导入特定函数1.3 处理文件路径2. 使用ex