/**
* 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. 如何在spring环境中做单元测试

    在测试类的上方加入以下注解 @RunWith(SpringJUnit4ClassRunner.class)@ContextConfiguration("classpath:spring.xm ...

  2. Mysql order by 多字段排序

    mysql单个字段降序排序: select * from table order by id desc; mysql单个字段升序排序: select * from table order by id ...

  3. NOIP数学相关模板整理

    $O(n)$递推求逆元 #include<cstdio> #include<cstring> #include<algorithm> using namespace ...

  4. PeopleSoft FSCM Production Support 案例分析之一重大紧急事故发生时的应对策略

    案例背景: 今天一大早用户打电话来讲昨天上传的银行的forex payment return file好像没有被处理到,我一听就觉得纳闷,因为昨天晚上operator也没有给我打电话啊(如果有job ...

  5. Azure Powershell 获取可用镜像 PublisherName,Offer,Skus,Version

    #登录 $username="{登录名}" #定义一个用户账号的变量,可以输入需要登录的订阅账号名称 $password=ConvertTo-SecureString -Strin ...

  6. 【数据分析 R语言实战】学习笔记 第十一章 对应分析

    11.2对应分析 在很多情况下,我们所关心的不仅仅是行或列变量本身,而是行变量和列变量的相互关系,这就是因子分析等方法无法解释的了.1970年法国统计学家J.P.Benzenci提出对应分析,也称关联 ...

  7. jmeter中通过jdbc方式连接mysql数据库的配置参考

    jmeter中通过jdbc方式连接mysql数据库的配置参考: Database URL=jdbc:mysql://ip:port/dbname?useUnicode=true&allowMu ...

  8. 一、numpy入门

    Array import numpy as np # create from python list list_1 = [1, 2, 3, 4] array_1 = np.array(list_1)# ...

  9. iOS开发各种证书问题

    引言 写在前面 一.App ID(bundle identifier)     二.设备(Device)     三.开发证书(Certificates) 四.供应配置文件(Provisioning ...

  10. Ubuntu下Hyperledger Fabric v0.6安装部署

    系统环境:虚拟机VMware Workstation中的Ubuntu 16.04LTS 1.环境准备 1.1安装Docker Docker安装命令: curl –fsSL https://get.do ...