angular controller与directive相互引用
/**
* 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 controller与directive相互引用的更多相关文章
- angularjs取Sevice和directive的引用
取Sevice和directive的引用 3: Grab any Services We can grab a reference to any service using the injector ...
- AngularJS + ui-router + RequireJS异步加载注册controller/directive/filter/service
一般情况下我们会将项目所用到的controller/directive/filter/sercive预先加载完再初始化AngularJS模块,但是当项目比较复杂的情况下,应该是打开对应的界面才加载对应 ...
- Angular 下的 directive (part 2)
ngCloak ngCloak指令被使用在,阻止angular模板从浏览器加载的时候出现闪烁的时候.使用它可以避免闪烁问题的出现. 该指令可以应用于<body>元素,但首选使用多个ng ...
- angular Creating a Directive that Adds Event Listeners
<span my-draggable>Drag ME</span> angular.module('dragModule', []) .directive('myDraggab ...
- C语言中结构体 自引用 和 相互引用
http://blog.163.com/modingfa_002/blog/static/11092546620133193264579 结构体的自引用(self reference),就是在结构体内 ...
- css笔记14:css文件之间可以相互引用
css文件之间相互引用是通过@import指令完成的 格式: @import url("被引用的css文件"); 顺便说一句,如果希望在html或者php文件中引用某个xxx.c ...
- 《how to design programs》15章 相互引用的数据定义
由结构体组成的表与结构体中的表. 在用追溯形式建立家家谱树时,我们通常从某个后代除法,依次处理它的父母,组父母等.而构建树时,我们会不断添加谁是谁的孩子,而不是写出谁是谁的父母,从而建立一颗后代家谱树 ...
- Cocos Creator两个类相互引用(调用)
如果两个类相互引用,脚本加载阶段就会出现循环引用,循环引用将导致脚本加载出错:///////////Game.jsvar Item = require("Item");var Ga ...
- C++类间相互引用
两个类相互包含引用的问题 不管是下文中提到的例子,还是任何情况,使得class A的头文件需要include class B的头文件,class B的也要引用A的头文件,这种状况下,貌似会出现有一个类 ...
随机推荐
- Less的学习和使用
官网 http://less.bootcss.com/usage/ 在线编译器 http://tool.oschina.net/less
- Scrapy框架的基本组成及功能使用
1.什么是scrapy? Scrapy是一个为了爬取网站数据,提取结构性数据而编写的应用框架.框架的本质就是集成各种功能.具有很强通用性的项目模板. 2.安装 Linux: pip3 in ...
- 读懂《HTML5网页开发实例详解》这本书
你还在用Flash嘛?帮主早不用了 乔布斯生前在公开信<Flash之我见>中预言:像HTML 5这样在移动时代中创立的新标准,将会在移动设备上获得胜利. ——国际巨头Google.苹果等都 ...
- Web开发者应掌握的12个Firebug技巧
来源: 廖煜嵘 相信很多从事Web开发工作的开发者都听说和使用过Firebug,但可能大部分人还不知道,其实它是一个在网页设计方面功能相当强大的编辑器,它 可以对HTML.DOM.CSS.HTTP和J ...
- 【NumPy学习指南】day4 多维数组的切片和索引
ndarray支持在多维数组上的切片操作.为了方便起见,我们可以用一个省略号(...)来 表示遍历剩下的维度. (1) 举例来说,我们先用arange函数创建一个数组并改变其维度,使之变成一个三维数组 ...
- PL/SQL学习笔记(二)
select * from protype;select * from product;---笛卡尔连接查询(交叉连接)select * from protype,product;select * f ...
- ubuntu 14.04 安装redis
root@hett-PowerEdge-T30:~# sudo apt-get install redis-server Reading package lists... DoneBuilding d ...
- UVA 1151 Buy or Build (最小生成树)
先求出原图的最小生成树,然后枚举买哪些套餐,把一个套餐内的点相互之间边权为0,直接用并查集缩点.正确性是基于一个贪心, 在做Kruskal算法是,对于没有进入最小生成树的边,排序在它前面的边不会减少. ...
- spark 省份次数统计实例
//统计access.log文件里面IP地址对应的省份,并把结果存入到mysql package access1 import java.sql.DriverManager import org.ap ...
- 自己开发一个APP需要多少钱
广州APP开发公司[启汇网络]经常遇到有开发定制APP软件需求的企业,通常第一句问的就是“开发一款APP需要多少钱”,在做完客户行业的市场调查后,再了解客... 广州APP开发公司[启汇网络]经常遇到 ...