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 ...
随机推荐
- spring实战四之Bean的自动装配(注解方式)
使用注解装配: 从spring2.5开始,Spring启用了使用注解自动装配Bean的属性,使用注解方式自动装配与在XML中使用 autowire 属性自动装配并没有太大区别,但是使用注解方式允许更细 ...
- Codeforces 161D Distance in Tree（树的点分治）
题目大概是,给一棵树,统计距离为k的点对数. 不会DP啊..点分治的思路比较直观,啪啪啪敲完然后AC了.具体来说是这样的: 树上任何两点的路径都可以看成是一条过某棵子树根的路径,即任何一条路径都可以由 ...
- bzoj1021 [SHOI2008]Debt 循环的债务
前天打了一场比赛,让我知道自己Dp有多弱了,伤心了一天,没刷bzoj. 昨天想了一天,虽然知道几何怎么搞,但我还是不敢写,让我知道自己几何有多弱了,伤心了一天,没刷bzoj 1021: [SHOI20 ...
- BZOJ 1036 && 树链剖分
还是太弱啊..各种数据结构只听过名字却没有一点概念..树链剖分也在这个范畴..今天来进一步深化一下教育改革推进全民素质提高. 性质 忘了在哪里看到的一篇blog有一句话讲得非常好,树链剖分不是一种数据 ...
- shadowColor表示阴影颜色，shadowBlur表示模糊等级
绘制之前的准备工作: 1.在body中加入canvas标签,设置它的id.width.height,当然也可以动态设置它的宽高. <canvas id="mycanvas" ...
- lucene 3.0.2 search 各种各样的Query类型
http://blog.sina.com.cn/s/blog_61d2047c010195mo.html lucene的这种各种各样的查询类型 1.TermQuery 最简单的Qu ...
- ubuntu 14.04安装
最近想搞spark.没有集群环境,想先在单机上跑.但是两年前一直用到现在的virtualbox已经太老,很多源都停更了.所以准备装ubuntu14.04. 0. 更新源.163的源有问题,用的是soh ...
- System-Defined Device Setup Classes Available to Vendors
https://msdn.microsoft.com/en-us/library/windows/hardware/ff553426(v=vs.85).aspx
- SQL Server访问MySql
使用环境:操作系统:window7数据库:SQL Server2005.MySql5.01.在安装了SQL Server的服务器上安装MySql的ODBC驱动:下载链接:http://dev.mysq ...
- UIButton 长按点击 背景改变效果
1.添加按钮的点击事件和按下事件 [btn setImage:[UIImage imageNamed:@"NorMal.png"] forState:UIControlStateN ...