/**
* 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 组件之间传值的更多相关文章

  1. vue组件之间传值方式解析

    vue组件之间传值方式解析一.父组件传到子组件 1.父组件parent代码如下: <template> <div class="parent"> <h ...

  2. react 组件之间传值

    谈及React时,就会想到一个很重要的思想,就是组件化思想.它将可以重用的部分进行组件化开发,形成一个个相对独立的组件,那么组件化后,你也会提出些疑问,组件与组件之间,将怎样进行信息的传递呢?下面来介 ...

  3. react组件之间传值方式

    1.父向子(通过props传值) 2.父向更深层的子(通过context传值) 3.子向父(通过回调函数传值:在父组件中创建一个函数来接收子组件传过来的参数值,通过父组件将这个函数做为子组件的属性传递 ...

  4. 从0开始探究vue-组件化-组件之间传值

    理解 Vue中有个非常重要的核心思想,就是组件化,组件化是为了代码复用 什么是组件化 组件化,就像一个电脑主机里的主板,有内存条的插口,有硬盘,光驱等等的插口,我们的项目,就像一个电脑主机,通过各种组 ...

  5. 4-react 组件之间传值。

    1.传值: 都是使用props和state结合得方式进行组件之间得传值 再react中传值得话是父子组件之间得传值,一般会把父组件中得state值通过props传给子组件,再子组件中使用props进行 ...

  6. Angular组件之间通讯

    组件之间会有下列3种关系: 1. 父子关系 2. 兄弟关系 3. 没有直接关系 通常采用下列方式处理(某些方式是框架特有)组件间的通讯,如下: 1父子组件之间的交互(@Input/@Output/模板 ...

  7. angular组件之间的通讯

    组件通讯,意在不同的指令和组件之间共享信息.如何在两个多个组件之间共享信息呢. 最近在项目上,组件跟组件之间可能是父子关系,兄弟关系,爷孙关系都有.....我也找找了很多关于组件之间通讯的方法,不同的 ...

  8. [Vue]子组件与父组件之间传值

    1.父组件与子组件传值props 1.1定义父组件,父组件传递 inputText这个数值给子组件: //父组件 //引入的add-widget组件 //使用 v-bind 的缩写语法通常更简单: & ...

  9. vue父子组件之间传值

    vue父子组件进行传值 vue中的父子组件,什么是父组件什么是子组件呢?就跟html标签一样,谁包裹着谁谁就是父组件,被包裹的元素就是子组件. 父组件向子组件传值 下面用的script引入的方式,那种 ...

随机推荐

  1. Unity Shader入门精要学习笔记 - 第13章 使用深度和法线纹理

    线纹理的代码非常简单,但是我们有必要在这之前首先了解它们背后的实现原理. 深度纹理实际上就是一张渲染纹理,只不过它里面存储的像素值不是颜色值而是一个高精度的深度值.由于被存储在一张纹理中,深度纹理里的 ...

  2. AJPFX分享java排序之希尔排序

    (1)基本思想:算法先将要排序的一组数按某个增量d(n/2,n为要排序数的个数)分成若干组,每组中记录的下标相差d.对每组中全部元素进行直接插入排序,然后再用一个较小的增量(d/2)对它进行分组,在每 ...

  3. eclipse修改xml配置文件tomcat不能同步问题

    之前springmvc-config.cml中的Controller写成了Constroller,导致java.lang.ClassNotFoundException异常,而我更改后,更新的信息并没有 ...

  4. viewpager的使用-新方法 5.1

    效果图: 添加依赖包: compile ‘com.android.support:design:22.2.0‘ 布局文件: <?xml version="1.0" encod ...

  5. openstack No valid host was found. There are not enough hosts available.

    root@dell-PowerEdge-T30:~# gedit /var/log/nova/nova-conductor.logroot@dell-PowerEdge-T30:~# gedit /v ...

  6. Eclipse Java类编辑器里出现乱码的解决方案

    如图:在Java Class编辑器里出现的这种乱码,非常烦人. 解决方案:Windows->Preference->General->Appearance, 在里面将Theme设置成 ...

  7. 5 Options for Distributing Your iOS App to a Limited Audience

    http://mobiledan.net/2012/03/02/5-options-for-distributing-ios-apps-to-a-limited-audience-legally/ I ...

  8. 基于Python的Web应用开发实战——2 程序的基本结构

    2.1 初始化 所有Flaks程序都必须创建一个程序实例. Web服务器使用一种名为Web服务器网关接口(Web Server Gateway Interface,WSGI)的协议,把接收自客户端的所 ...

  9. python爬虫---实现项目(四) 用BeautifulSoup分析新浪新闻数据

    这次只演示了,如何在真实项目内用到BeautifulSoup库来解析网页,而新浪的新闻是ajax加载过来的数据,在这里我们只演示解析部分数据(具体反扒机制没做分析). 代码地址:https://git ...

  10. BZOJ1009: [HNOI2008]GT考试 (矩阵快速幂 + DP)

    题意:求一个长度为n的数字字符串 (n <= 1e9) 不出现子串s的方案数 题解:用f i,j表示长度为i匹配到在子串j的答案 用kmp的失配函数预处理一下 然后这个转移每一个都是一样的 所以 ...