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向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"></

linux中使用rust语言在不同进程之间通信

第一种:使用mmap映射相同文件 fn main() {let pid = std::process::id();println!(

从希腊神话到好莱坞大片,人工智能的七大历史时期值得铭记

本文选自historyextra,机器之心编译出品,参与成员:Angulia、小樱、柒柒、孟婷 你可能听过「技术奇点」,即本世纪某个阶段将出现超级智能,那时,技术将会以人类难以想象的速度飞速发展。同样,黑洞也是一个奇点,在其上任何物理定律都不适用;因此,技术奇点也是超越未来理解范围的一点。 然而,在我们到达那个奇点之前(假设我们能到达),还存在另一个极大的不连续问题,我将它称之

MVC(Model-View-Controller)和MVVM(Model-View-ViewModel)

1、MVC MVC(Model-View-Controller) 是一种常用的架构模式,用于分离应用程序的逻辑、数据和展示。它通过三个核心组件(模型、视图和控制器)将应用程序的业务逻辑与用户界面隔离,促进代码的可维护性、可扩展性和模块化。在 MVC 模式中,各组件可以与多种设计模式结合使用,以增强灵活性和可维护性。以下是 MVC 各组件与常见设计模式的关系和作用: 1. Model(模型)

JAVA基础:值传递和址传递

1 值传递和址传递 值传递 方法调用时,传递的实参是一个基本类型的数据 形参改变,实参不变 public static void doSum(int num1,int num2){}main(){doSum(10,20);int i = 10 ;int j = 20 ;doSum(i,j) ;}   public static void t1(int num){num = 20