首页 web前端 js教程 Angular中Controller之间的信息传递(第二种办法):$emit,$broadcast,$on

Angular中Controller之间的信息传递(第二种办法):$emit,$broadcast,$on

Jul 05, 2017 pm 06:10 PM
angular controller 传递

    • $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中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
4 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

什么是 Windows 11 中的传递优化文件,您可以删除它们吗? 什么是 Windows 11 中的传递优化文件,您可以删除它们吗? Sep 29, 2023 pm 04:09 PM

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

SpringBoot扫描不到Controller怎么解决 SpringBoot扫描不到Controller怎么解决 May 14, 2023 am 08:10 AM

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

如何在Ubuntu 24.04上安装Angular 如何在Ubuntu 24.04上安装Angular Mar 23, 2024 pm 12:20 PM

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

angular学习之详解状态管理器NgRx angular学习之详解状态管理器NgRx May 25, 2022 am 11:01 AM

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

浅析angular中怎么使用monaco-editor 浅析angular中怎么使用monaco-editor Oct 17, 2022 pm 08:04 PM

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

一文探究Angular中的服务端渲染(SSR) 一文探究Angular中的服务端渲染(SSR) Dec 27, 2022 pm 07:24 PM

你知道 Angular Universal 吗?可以帮助网站提供更好的 SEO 支持哦!

项目过大怎么办?如何合理拆分Angular项目? 项目过大怎么办?如何合理拆分Angular项目? Jul 26, 2022 pm 07:18 PM

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

聊聊自定义angular-datetime-picker格式的方法 聊聊自定义angular-datetime-picker格式的方法 Sep 08, 2022 pm 08:29 PM

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

See all articles