Angular $broadcast和$emit和$ond实现父子通信
<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
<meta charset="UTF-8">
<script src="js/angular.js"></script>
<title></title>
</head>
<body> <div ng-controller="parentCtrl">
<button ng-click="toChild()">
向child传值
</button> <div ng-controller="childCtrl">
<p>{{data}}</p>
<button ng-click="toParent()">向parent传值</button>
</div> </div> <script>
var app = angular.module('myApp', ['ng']); app.controller('parentCtrl', function ($scope) {
$scope.toChild = function () {
//通过事件传值 约定事件名称：toChildEvent
$scope.$broadcast(
'toChildEvent',
' msg from parent')
} //绑定toParentEvent事件的处理函数
$scope.$on('toParentEvent',
function (event, result) {
console.log(result);
}) }); app.controller('childCtrl', function ($scope) {
//绑定事件 $on
$scope.$on('toChildEvent',
function (event, result) {
console.log(arguments);
$scope.data = result;
}); $scope.toParent = function () {
//向父级元素通过事件传值 $emit 约定:toParentEvent
$scope.$emit(
'toParentEvent',
'msg to my parent'
);
} }); </script>
</body>
</html>
Angular $broadcast和$emit和$ond实现父子通信的更多相关文章
- angularjs的事件 $broadcast and $emit and $on
angularjs的事件 $broadcast and $emit and $on <!DOCTYPE html> <html> <head> <meta c ...
- 通过$broadcast或$emit在子级和父级controller之间进行值传递
通过$broadcast或$emit在controller之间进行值传递,不过这些controller必须是子级或者父级关系, $emit只能向父级parent controller传递事件event ...
- angular之$broadcast、$emit、$on传值
文件层级 index.html <!DOCTYPE html> <html ng-app="nickApp"> <head> <meta ...
- angularJS控制器之间的相互通信方式、$broadcast、$emit、$on
在项目中,我们可能会很经常性的利用到控制器之间的相互通信,在angular中的控制器之间的相互通信有以下几种方式: 1)通过本地数据的存储localstorage,sessionstorage, 2) ...
- Angular中$broadcast和$emit的使用方法
要在控制器之间传递变量变化需要使用angular中的$broadcast和$emit方法来传递,同时使用$on来接收事件并作出响应. broadcast译为广播,即上级传递下级. 示例代码: < ...
- angular,vue,react的父子通信
父子通信 父传子 vue: 父组件:<child :msg="datamsg" ></child> //子组件的msg属性上加数据,datamsg是数据 子 ...
- vue 父子通信过程
1.概述 每个 Vue 实例都实现了事件接口,即: 使用 $on(eventName) 监听事件 使用 $emit(eventName, optionalPayload) 触发事件 2.示例一(未传递 ...
- vue父子通信的基本使用
项目中没怎么用过父子通信,很多页面都是路由切换实现的,后来做首页的时候发现首页的路径没法配置,我强行在原先的首页上写了个子组件,通过判断路径使其强行跳转实现的 这个时候跳转页面的时候就要使用到了父子间 ...
- vue之非父子通信
一.非父子通信: 思路: 找个中间存储器,组件一把信息放入其中,组件二去拿 代码如下: let hanfei = new Vue(); # 实列化个空的vue对象,作为中间存储器来时间 ...
随机推荐
- ORB-SLAM2(4) 离线双目数据测试
官网 https://github.com/raulmur/ORB_SLAM2 1从http://www.cvlibs.net/datasets/kitti/eval_odometry.php下载数据 ...
- Linux监控命令整理（top,free,vmstat,iostat,mpstat,sar,netstat）
1.1 top 1.1.1 命令说明 Top 命令能够实时监控系统的运行状态,并且可以按照cpu.内存和执行时间进行排序 1.1.2 参数说明 命令行启动参数: 用法: top -hv | -bcis ...
- ros新建的包找不到
cannot find the package 这个问题的解决办法一:每次打开命令窗都使用一次 source ~/ros_ws/devel/setup.bash 解决方法二:在住文件夹的图形界面使用快 ...
- AI mac安装TensorFlow
1.安装pip sudo easy_install pip 2.安装virtualenv sudo pip install --upgrade virtualenv 3.在指定目录创建virtuale ...
- Android学习之键盘事件
java代码: package com.example.keyboardtest; import android.app.Activity; import android.os.Bundle; imp ...
- MySQL（二）数据的检索和过滤
使用频率最高的SQL语句应该就是select语句了,它的用途就是从一个或多个表中检索信息,使用select检索表数据必须给出至少两条信息:想选择什么,以及从什么地方选择 一.检索数据 1.检索单个列 ...
- ASP.NET Core 使用外部登陆提供程序登陆的流程，以及身份认证的流程 （转载）
阅读目录 在Asp.Net Core 中使用外部登陆(google.微博...) 中间件管道 The Authentication Middleware The Challenge 与认证中间件进行交 ...
- Unexpected error from external database driver (1)
当尝试把Excel导入SQL时,发生此异常: Unexpected error from external database driver (1). 在网上查找到一个解决方法,网址http://dat ...
- CF 888E Maximum Subsequence
一道比较套路的题,看到数据范围就差不多有想法了吧. 题目大意:给一个数列和\(m\),在数列任选若干个数,使得他们的和对\(m\)取模后最大 取膜最大,好像不能DP/贪心/玄学乱搞啊.\(n\le35 ...
- .NET CORE下的Cache
.NET CORE 下的缓存跟之前ASP.NET下的缓存有所不同,应用.NET CORE缓存首先需要引入Microsoft.Extensions.Caching.Memory程序包 下面简单写了一个C ...