angular 组件之间传值
/**
* Created by Administrator on 2017/8/28.
*/
var app =angular.module('app',[]);
app.directive('food',function () {
return {
restrict:"E",
scope:[],
controller:function($scope){
$scope.foods=[];
this.addApple=function () {
$scope.foods.push("apple");
}
this.addOrange=function () {
$scope.foods.push("orange");
}
this.addBanana=function () {
$scope.foods.push("banana");
}
},
link:function ($scope,element,attrs) {
element.bind("mouseenter",function () {
console.log($scope.foods)
});
}
}
});
app.directive('apple',function () {
return {
require:'food',
link:function($scope,element,attrs,foodCtrl){
foodCtrl.addApple();
}
}
});
app.directive('orange',function () {
return {
require:'food',
link:function($scope,element,attrs,foodCtrl){
foodCtrl.addOrange();
}
}
});
app.directive('banana',function () {
return {
require:'food',
link:function($scope,element,attrs,foodCtrl){
foodCtrl.addBanana();
}
}
}); app.directive('hello',function(){
return {
restrict:"E",
replace:true,
template:'<div><input type="text" ng-model="txt"/><div>{{txt}}</div></div>',
link:function($scope,element,attrs){
$scope.$watch('txt',function(newVal,oldVal){
if(newVal==="error"){
console.dir(element);
element.attr("style","border:solid 1px red");
}else{
element.attr("style","");
}
});
}
}
}); app.controller('OneSelfController',function($scope){
$scope.clkme=function(){
$scope.$broadcast('sendChild','我给子控制器传递数据');
$scope.$emit('sendParent','冒泡到父元素')
}
}).controller('ParentController',function($scope){
$scope.$on('sendParent',function(event,data){//监听在子控制器中定义的 sendParent 事件
console.log('OneSelfController传过来的',data,event.name,event);//事件名称:sendParent
});
$scope.clkP=function(){
$scope.$broadcast('sendAllChild','让siblingsController接收到');
} }).controller('ChildController', function($scope){
$scope.$on('sendChild', function(event,data) {//监听在子控制器中定义的 sendChild 事件
console.log('ChildCtrl', data,event.name,event);// 事件名称:sendChild
});
}).controller('siblingsController', function($scope){
$scope.$on('sendAllChild',function(event,data) {
console.log('值过来吧', data);
});
//下面事件不会触发
$scope.$on('sendParent', function(event,data) {
console.log('平级得不到值', data);
});
$scope.$on('sendChild', function(event,data) {
console.log('平级得不到值', data);
});
});
angular 组件之间传值的更多相关文章
- vue组件之间传值方式解析
vue组件之间传值方式解析一.父组件传到子组件 1.父组件parent代码如下: <template> <div class="parent"> <h ...
- react 组件之间传值
谈及React时,就会想到一个很重要的思想,就是组件化思想.它将可以重用的部分进行组件化开发,形成一个个相对独立的组件,那么组件化后,你也会提出些疑问,组件与组件之间,将怎样进行信息的传递呢?下面来介 ...
- react组件之间传值方式
1.父向子(通过props传值) 2.父向更深层的子(通过context传值) 3.子向父(通过回调函数传值:在父组件中创建一个函数来接收子组件传过来的参数值,通过父组件将这个函数做为子组件的属性传递 ...
- 从0开始探究vue-组件化-组件之间传值
理解 Vue中有个非常重要的核心思想,就是组件化,组件化是为了代码复用 什么是组件化 组件化,就像一个电脑主机里的主板,有内存条的插口,有硬盘,光驱等等的插口,我们的项目,就像一个电脑主机,通过各种组 ...
- 4-react 组件之间传值。
1.传值: 都是使用props和state结合得方式进行组件之间得传值 再react中传值得话是父子组件之间得传值,一般会把父组件中得state值通过props传给子组件,再子组件中使用props进行 ...
- Angular组件之间通讯
组件之间会有下列3种关系: 1. 父子关系 2. 兄弟关系 3. 没有直接关系 通常采用下列方式处理(某些方式是框架特有)组件间的通讯,如下: 1父子组件之间的交互(@Input/@Output/模板 ...
- angular组件之间的通讯
组件通讯,意在不同的指令和组件之间共享信息.如何在两个多个组件之间共享信息呢. 最近在项目上,组件跟组件之间可能是父子关系,兄弟关系,爷孙关系都有.....我也找找了很多关于组件之间通讯的方法,不同的 ...
- [Vue]子组件与父组件之间传值
1.父组件与子组件传值props 1.1定义父组件,父组件传递 inputText这个数值给子组件: //父组件 //引入的add-widget组件 //使用 v-bind 的缩写语法通常更简单: & ...
- vue父子组件之间传值
vue父子组件进行传值 vue中的父子组件,什么是父组件什么是子组件呢?就跟html标签一样,谁包裹着谁谁就是父组件,被包裹的元素就是子组件. 父组件向子组件传值 下面用的script引入的方式,那种 ...
随机推荐
- Linux系统下安装rz/sz命令及使用说明(文件上传下载)
1.安装软件 yum -y install lrzsz 2.本地文件上传命令 rz -bye 执行该命令后,在弹出框中选择要上传的文件即可 3.下载文件到本地 sz filename
- 难道这就是gin中间件的原理,一个装饰者模式而已?
func wrapCtx(handler func(ctx *gin.Context)) gin.HandlerFunc { return func(c *gin.Context) { //获取请求的 ...
- Java之final、static关键字及匿名对象
个人通俗理解: 1.final:首先被final修饰的变量就自动变成的不能被修改的常量了.被修饰的类会自动变成太监类,只能有父类,不能有子类:被修饰的方法也不能被子类重写了:被修饰的引用变量值也不能更 ...
- Jenkins执行shell脚本启动tomcat失败解决方法
环境:Centos 7 Jenkins版本:2.124 状况:Jenkins会执行服务器某个目录下的Shell, 脚本中功能是复制替换某两个配置文件,然后关闭tomcat,重启Tomcat. 但是,T ...
- apache下设置域名多站点访问及禁止apache访问80端口
apache下设置域名多站点访问 当前系统:macOS High Sierra 域名访问配置指定端口后,不同域名只能配置不同的端口 apache配置目录: sudo vim /etc/apache2/ ...
- 关于软件测试(5):初识Peer Review
一.背景:这周的软件测试课堂上我们在自行分组的情况下,对姚同学的汽车停车位定位管理系统进行了Peer Review,中文就是同行测试.这也是我第一次接触同行测试,那接下来我先介绍一下Peer Revi ...
- selenium的定位
id定位 find_element_by_id()方法通过id来定位元素 例如: find_element_by_id("kw") find_element_by_id(&quo ...
- Openjudge 1.13-23:区间内的真素数
总时间限制: 1000ms 内存限制: 65536kB 描述 找出正整数 M 和 N 之间(N 不小于 M)的所有真素数. 真素数的定义:如果一个正整数 P 为素数,且其反序也为素数,那么 P 就 ...
- spring 中bean学习笔记
spring 中bean 一.bean的定义和应用 1. bean 形象上类似于getXX()和setXX()的一种. 2. 由于java是面向对象的,类的方法和属性在使用中需要实例化. 3. 规律: ...
- Codeforces Round #317 (Div. 2) D Minimization (贪心+dp)
D. Minimization time limit per test 2 seconds memory limit per test 256 megabytes input standard ...