angularjs作用域之作用域事件的传递

最新推荐文章于 2020-12-23 21:11:52 发布
原创 最新推荐文章于 2020-12-23 21:11:52 发布 · 443 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

这篇博客探讨了AngularJS中作用域事件的传递，包括$emit向父级控制器传递事件和数据，$broadcast向子级控制器传递事件和数据，以及如何使用$on来接收这些事件和数据。通过实例展示了事件在不同层级控制器间的交互。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

不说话，直接上干货

<!doctype html>
<html ng-app="">
  <head>
  <meta charset="utf-8" />
    <script src="../js/angular.min.js"></script>
    <title>作用域事件的传递</title>
  </head>
  <body>
  <div ng-controller="EventController">
  Root Scope<tt>MyEvent</tt>count:{{count}}
  <ul>
  <li ng-repeat="i in [1]" ng-controller="EventController">
  <button ng-click="$emit('MyEvent')">$emit('MyEvent')</button>
  <button ng-click="$broadcast('MyEvent')">$broadcast('MyEvent')</button>
     <br />
     Middle scope<tt>MyEvent</tt>count:{{count}}
  <ul>
    <li ng-repeat="item in [1, 2]" ng-controller="EventController">
    Leaf scope<tt>MyEvent</tt>count:{{count}}
    </li>
  </ul>
  </li>
  </ul>
  </div>
  <script type="text/javascript">
  function EventController($scope){
  $scope.count = 0;
  $scope.$on('MyEvent',function(){
  $scope.count++;
  });
  }
  </script>
  </body>
</html>


说明：$on、$emit和$broadcast使得event、data在controller之间的传递变得简单
      $emit只能向parent controller传递event与data
      $broadcast只能向child controller传递event与data
      $on用于接收event与data

逆流悲心
关注
angular中如何定义全局变量_在angular中定义模块的全局变量有哪些方法？示例代码？...
weixin_32273747的博客
01-14 447
例如，angular.module('xxx',[]).value();再例如，绑定在$rootScope上面。感觉自己脑子里对这些有些模糊，想讨论一下这个主题。https://docs.angularjs.org/api/ng/type/angular.Module这个页面里的api都怎么用，感觉只看文档不是很明白。1.一般来说，是不建议在$rootScope上面绑定过多的变量，这样一来程序的可...
angular设置全局变量，可修改监听变量
weixin_30588827的博客
02-20 4539
创建service.module.ts import { NgModule, ModuleWithProviders } from '@angular/core'; import { SomeSharedService } from './global.service'; export { SomeSharedService } @NgModule() export class Serv...
AngularJS应用模块化，作用域与事件
qq_40975386的博客
05-14 520
AngularJS框架在window对象下一个全局的angular对象，通过调用angular对象的module（）方法返回一个模块实例，我举例一个具体使用方法//定义一个无依赖模块 angular.module('appModule',[]); //定义一个依赖module1、module2的模块 angular.module('appModule',['module1','module2'])...
使用angularjs事件多个参数的传递
乐天小葵
01-04 2169
{{user.name}} 上面就是用法注意。
AngularJS 通过事件实现跨作用域传值
qq_21047625的博客
04-03 572
跨作用域传值 跨作用域传值,可以通过子作用域共同使用父作用域的变量或者使用单例的service实现, 这两种方式,在父级作用域或者Service单例的变量值改变的时候,无法实现把值再自动处理赋值给作用域. 但是通过事件链的方式就可以实现实时更新 ,拿比较复杂的兄弟作用域的传值作为例子. 如图所示:子作用域,向上发布事件($emit),那么他的所有父级作用域链都会收...
angularjs $broadcast $emit $on 事件触发controller间的值传递
heartbeaty的专栏
03-04 592
使用angularjs，发现controller间的值传递，比较麻烦的，以后几篇文章会陆续说几种方法。 一，angularjs $broadcast $emit $on的处理思想 在一个controller里面通过事件触发一个方法，在方法里面通过$broadcast或$emit来定义一个变量，在父，子controller里面通过$on来获取。 二，实例说明angularjs $broadcast
angular中作用域间的通讯之$on、$emit和$boradcast
jochen——blog
04-10 275
1.创建一个单例服务，然后通过这个服务处理所有子作用域的通信。 2.通过作用域中的事件处理通信。但是这种方法有一些限制；例如，你并不能广泛的将事件传播到所有监控的作用域中。你必须选择是否与父级作用域或者子作用域通信。 $on、$emit和$broadcast使得event、data在controller之间的传递变的简单。 $emit：子传父 传递event与data $broadca
AngularJS入门教程之Scope(作用域)
01-19
AngularJS Scope(作用域) Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。 Scope 是一个对象，有可用的方法和属性。 Scope 可应用在视图和控制器上。 如何使用 Scope 当你在 AngularJS...
AngularJS 作用域详解及示例代码
11-22
AngularJS 是一个强大的前端开发框架，它通过双向数据绑定简化了网页应用的构建。...在实际项目中，你可能会遇到更复杂的场景，如作用域事件、作用域隔离等，这些都是进一步深入AngularJS学习的重要内容。
AngularJS Controller作用域
10-20
当有多个嵌套作用域时，如果尝试访问某个变量，AngularJS会首先查找当前作用域，如果没有找到，则会沿着作用域链向上查找，直到找到该变量或者到达根作用域。 在HTML中，使用ng-controller指令可以将一个Controller...
详解angularjs 学习之 scope作用域
10-18
AngularJS是一款由谷歌支持的开源前端JavaScript框架，广泛应用于...通过上述的知识点，我们可以看到AngularJS作用域的强大功能和灵活性，它的设计使得开发者能更加专注于业务逻辑的实现，而不是繁琐的数据同步操作。
angular中定义全局变量及全局变量的使用
diejiankuai3444的博客
09-12 873
一个例子，定义了两个变量，并且把变量显示出来： <!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="UTF-8"> <title>interval</title> <script type="text/javascript" s...
$uibModal
Mr__jin的博客
03-06 1万+
uibModal是一种创建模态窗口的服务。
angular5中使用全局变量
diejiankuai3444的博客
09-03 727
创建全局变量ts文件，然后引入 创建globals.ts文件： export const base_path = "http://localhost/api/index.php/Home"; 在需要全局变量的代码页引入： import * as globals from '../../globals'; 然后就可以使用这个变量了： let url = gl...
AngularJS ng-repeat 中的ng-click事件以及参数的传递
热门推荐
Soaring_Tiger的专栏
03-05 3万+
用ng-repeat 批量生成各种控件是很方便的事情，各种控件的点击事件（包括参数传递）也是可以批量生成的。 例如：下面的例子就用ng-repeat绑定了一个按钮、一张图片，都能响应。HTML：<div ng-repeat='item in items'> <button ng-click="showItemId(item.id)">{{item.name}}</button> <a ng
angular中如何定义全局变量_Angular中的全局变量
weixin_32109109的博客
12-23 1941
Angular中的全局变量我有一个问题，我在控制器中的范围初始化变量。 然后在用户登录时在另一个控制器中进行更改。此变量用于控制导航栏等内容，并根据用户类型限制对站点部分的访问，因此保持其值非常重要。 它的问题在于初始化它的控制器，通过角度再次调用，然后将变量重置为其初始值。我认为这不是声明和初始化全局变量的正确方法，它不是真正的全局变量，所以我的问题是什么是正确的方法，是否有任何关于使用当前版本...
angularJS中的父子作用域和兄弟作用域，以及父子，兄弟controller通信机制
Coder.SirLoin的博客
12-07 8621
angularJS中非常重要的概念之一就是作用域，不同的作用域之间是相互隔离的，通过常规手段是无法互相访问变量及方法的 本次我们着重讲一下父子作用域和兄弟作用域 1.父子作用域 当我们的controller层级关系是这种时，ChildCtrl就是子controller,ParentCtrl就是父controller，他们之间的作用域关系就是父子作用域 a
angular6 设置全局变量_angularjs 设置全局变量的3种方法
weixin_39998521的博客
12-22 356
angularjs 设置全局变量的3种方法angularjs自身有二种，设置全局变量的方法，在加上js的设置全局变量的方法，总共有三种。要实现的功能是，在ng-app中定义的全局变量，在不同的ng-controller里都可以使用。1，通过var 直接定义global variable，这根纯js是一样的。2，用angularjs value来设置全局变量 。3，用angularjs consta...
AngularUI之Modal的子作用域研究
小新正在敲代码
11-15 2525
我们知道通过AngularUI打开模态对话框的方法是uibModal.open();open的参数是一个对象，其中一个key为scope。如果我们设置scope:uibModal.open({});open的参数是一个对象，其中一个key为scope。如果我们设置scope: scope。则模态对话框继承了父作用。 下面我们来讲子scope继承父scope的原理：总的来说只有一句话，子作用域对父作
AngularJS子级作用域深度解析：继承与双向绑定
同时，文章探讨了JavaScript的原型继承机制在AngularJS作用域继承中的应用，并提供了三种实现子级作用域修改父级属性的方法。" 在AngularJS中，子级作用域是通过JavaScript的原型继承机制与父级作用域建立联系的。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值