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

相关文章

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

Java向kettle8.0传递参数的方式总结

《Java向kettle8.0传递参数的方式总结》介绍了如何在Kettle中传递参数到转换和作业中,包括设置全局properties、使用TransMeta和JobMeta的parameterValu... 目录1.传递参数到转换中2.传递参数到作业中总结1.传递参数到转换中1.1. 通过设置Trans的

如何在页面调用utility bar并传递参数至lwc组件

1.在app的utility item中添加lwc组件: 2.调用utility bar api的方式有两种: 方法一,通过lwc调用: import {LightningElement,api ,wire } from 'lwc';import { publish, MessageContext } from 'lightning/messageService';import Ca

day-51 合并零之间的节点

思路 直接遍历链表即可,遇到val=0跳过,val非零则加在一起,最后返回即可 解题过程 返回链表可以有头结点,方便插入,返回head.next Code /*** Definition for singly-linked list.* public class ListNode {* int val;* ListNode next;* ListNode() {}*

AngularJS for login

web.xml <?xml version="1.0" encoding="UTF-8"?><web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/n

【每日一题】LeetCode 2181.合并零之间的节点(链表、模拟)

【每日一题】LeetCode 2181.合并零之间的节点(链表、模拟) 题目描述 给定一个链表,链表中的每个节点代表一个整数。链表中的整数由 0 分隔开,表示不同的区间。链表的开始和结束节点的值都为 0。任务是将每两个相邻的 0 之间的所有节点合并成一个节点,新节点的值为原区间内所有节点值的和。合并后,需要移除所有的 0,并返回修改后的链表头节点。 思路分析 初始化:创建一个虚拟头节点

数据视图(AngularJS)

<!DOCTYPE html><html ng-app="home.controller"><head><meta charset="utf-8"><title>数据视图</title><link href="page/common/css/bootstrap.min.css" rel="stylesheet"><script src="page/common/js/angular.js"></