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 ...
随机推荐
- wpf 客户端【JDAgent桌面助手】开发详解（四） popup控件的win8.0的bug
目录区域: 业余开发的wpf 客户端终于完工了..晒晒截图 wpf 客户端[JDAgent桌面助手]开发详解-开篇 wpf 客户端[JDAgent桌面助手]详解(一)主窗口 圆形菜单... wpf 客 ...
- oracle处理考勤时间,拆分考勤时间段的sql语句
最近一直在用mysql数据库做云项目,有段时间没有接触oracle了,昨天有朋友叫我帮忙用oracle处理一个考勤记录的需求,我在考虑如何尽量精简实现上面花了一些时间.于是把这个实现做个总结. 需求如 ...
- extjs 2.0获取选中的radio的值
var temp=winFormPanel.getForm().findField('selectedType').getGroupValue();
- 【BZOJ】3196: Tyvj 1730 二逼平衡树（区间第k小+树套树）
http://www.lydsy.com/JudgeOnline/problem.php?id=3196 Treap+树状数组 1WA1A,好伤心,本来是可以直接1A的,这次开始我并没有看题解,就写出 ...
- HDU 4669 Mutiples on a circle(环状DP)
题目链接 这是最早看懂题意的一题,状态转移,挺好想..但是比赛时候,就是没有想到怎么去重,而且当时有些情况,也没注意到. 先预处理的dp[0]的情况,就是以p[0]为结尾的情况.之后D就行了,例如样例 ...
- BZOJ3994: [SDOI2015]约数个数和
Description 设d(x)为x的约数个数,给定N.M,求 Input 输入文件包含多组测试数据. 第一行,一个整数T,表示测试数据的组数. 接下来的T行,每行两个整数N.M. O ...
- 使用Spring的注解方式实现AOP
Spring对AOP的实现提供了很好的支持.下面我们就使用Spring的注解来完成AOP做一个例子. 首先,为了使用Spring的AOP注解功能,必须导入如下几个包.aspectjrt.jar,asp ...
- MySQL 服务器的加快运行速度有哪些方法？
关于 MySQL 调优 有 3 种方法可以加快 MySQL 服务器的运行速度,效率从低到高依次为: 替换有问题的硬件.对 MySQL 进程的设置进行调优. 对查询进行优化. 替换有问题的硬件通常是我们 ...
- for循环的时候是按照数字递增会造成一些元素被遗漏
$test_array=array(1,2,3,4,4,5,5,6); $test_array_unique=array_unique($test_array); print_r($test_arra ...
- Powershell变量的类型
Powershell 默认支持的.NET类型如下: [order], [pscustomobject], [array], [bool], [byte], [char], [datetime], ...