angularJS自定义指令间的“沟通”
由此例子我们可以看出，angularJS使用指令时link的执行顺序
<html>
<head>
<meta charset="utf-8"/>
<title></title>
</head>
<body ng-app="components">
<div>
<name xm>
<h1>小明</h1>
</name>
</div>
<div>
<name xm xmxh>
<h1>小明，小花</h1>
</name>
</div>
<div>
<name xm xmxh xmxhxl>
<h1>小明，小花，小龙</h1>
</name>
</div>
</body>
<script src="angular.js"></script>
<script>
var app= angular.module('components', []); app.directive("name",function(){
return {
restrict: "AE",
scope:{},
controller:function($scope){
$scope.name=[];
this.Xm=function(){
$scope.name.push("小明");
};
this.Xh=function(){
$scope.name.push("小花");
}
this.Xl=function(){
$scope.name.push("小龙");
}
},//controller中定义的方法和乘员可以通过link的第四个参数实现对外公布
link:function(scope, element, attr, superCtrl){
element.bind("click",function(){
alert(scope.name);
});
}
}
}); app.directive("xm",function(){
return {
require:"^name",
link:function(scope, element, attr, superCtrl){
superCtrl.Xm();
}
}
}); app.directive("xmxh",function(){
return {
require:"^name",
link:function(scope, element, attr, superCtrl){
superCtrl.Xh();
}
}
}); app.directive("xmxhxl",function(){
return {
require:"^name",
link:function(scope, element, attr, superCtrl){
superCtrl.Xl();
}
}
});
</script>
</html>
angularJS自定义指令间的“沟通”的更多相关文章
- AngularJs自定义指令详解（1） - restrict
下面所有例子都使用angular-1.3.16.下载地址:http://cdn.bootcss.com/angular.js/1.3.16/angular.min.js 既然AngularJs快要发布 ...
- AngularJS: 自定义指令与控制器数据交互
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- 浅析AngularJS自定义指令之嵌入(transclude)
AngularJS自定义指令的嵌入功能与vue的插槽十分类似,都可以实现一些自定义内容展现.在开始之前先简单介绍下自定义指令的transclude属性和AngularJS的内置指令ng-transcl ...
- angularjs自定义指令Directive
今天学习angularjs自定义指令Directive.Directive是一个非常棒的功能.可以实现我们自义的的功能方法. 下面的例子是演示用户在文本框输入的帐号是否为管理员的帐号"Adm ...
- angularJs 自定义指令传值---父级与子级之间的通信
angularJs自定义指令用法我忽略,之前有写过,这里只说一下父子级之间如何传值: 例如: 模块我定义为myApp,index.html定义 <my-html bol-val="bo ...
- AngularJs自定义指令详解（6） - controller、require
在前面文章中提到一旦声明了require,则链接函数具有第四个参数:controller. 可见require和controller是配合使用的. 在自定义指令中使用controller,目的往往是要 ...
- angularJs自定义指令.directive==类似自定义标签
创建自定义的指令 除了 AngularJS 内置的指令外,我们还可以创建自定义指令. 你可以使用 .directive 函数来添加自定义的指令. 要调用自定义指令,HTML 元素上需要添加自定义指令名 ...
- angularJS——自定义指令
主要介绍指令定义的选项配置 //angular指令的定义,myDirective ,使用驼峰命名法 angular.module('myApp', []) .directive('myDirectiv ...
- AngularJS自定义指令(Directives)在IE8下的一个坑
在项目中,由于要兼容到IE8,我使用1.2.8版本的angularJS.这个版本是支持自定义指令的.我打算使用自定义指令将顶部的header从其他页面分离.也就是实现在需要header的页面只用在&l ...
随机推荐
- （centos）linux下访问双系统windows7文件系统
fdisk -l 无法挂载 NTFS格式的分区:mount: unknown filesystem type ‘ntfs’. 问题: # mount –t ntfs /dev/sdb1 ...
- HDU1853 & 蜜汁建图+KM模板
题意: 给你一个N个点M条边的带权有向图,现在要你求这样一个值:该有向图中的所有顶点正好被1个或多个不相交的有向环覆盖.这个值就是 所有这些有向环的权值和. 要求该值越小越好. SOL: 本来还想ta ...
- ios clang: error: linker command failed with exit code 1 (use -v to see invocation)解决方法
当xcode编译时出现这个错误,一般是你的编译源码中存在重复的源码 解决方法:"Build Phases" -> "Compile Sources" 去删 ...
- [Cocos2d-x For WP8]Particle粒子系统
在游戏中,经常要实现一些真实的效果,这些效果(如,火焰,雪花等)都是由大量微粒组合而形成的.为了在游戏中实现这种效果,我们必须引进粒子系统,粒子系统中需要包括四个部分:粒子对象,运动规律,随机性,粒子 ...
- WordPress折腾日记
安装环境: 我开了个虚拟机xp....用xampp的整合包..下载地址https://www.apachefriends.org/zh_cn/download.html 跟着安装就行了.最后打开xam ...
- COJ262 HDNOIP201206施工方案
HDNOIP201206施工方案 难度级别:A: 运行时间限制:1000ms: 运行空间限制:51200KB: 代码长度限制:2000000B 试题描述 c国边防军在边境某处的阵地是由n个地堡组成的. ...
- mysql中INSTR函数的用法
mysql中INSTR函数的用法 INSTR(字段名, 字符串) 这个函数返回字符串在某一个字段的内容中的位置, 没有找到字符串返回0,否则返回位置(从1开始) SELECT * FROM tblTo ...
- HDU 1394 Minimum Inversion Number（线段树/树状数组求逆序数）
Minimum Inversion Number Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java ...
- SSH+Oracle10G抛Disabling contextual LOB creation as createClob() m
在使用Oracle10G时候,实体类使用了CLOB字段,结果抛了Disabling contextual LOB creation as createClob() method threw error ...
- 嵌入式 如何定位死循环或高CPU使用率(linux) 及性能优化
嵌入式 如何定位死循环或高CPU使用率(linux) ln -s /mnt/nfs/_install/usr/bin/sort /usr/bin/sort awk '{print $1,$2,$14, ...