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 ...
随机推荐
- 素数环问题[XDU1010]
Problem 1010 - 素数环问题 Time Limit: 1000MS Memory Limit: 65536KB Difficulty: Total Submit: 972 Acc ...
- BZOJ3742 : Painting
设f[i][j]表示以i为根的子树,i与父亲之间的边染成j的最小代价 DP的过程中转移时相当于求一个最小权匹配,用费用流即可 感觉复杂度飞起来了… #include<cstdio> con ...
- 【BZOJ】1146: [CTSC2008]网络管理Network（树链剖分+线段树套平衡树+二分 / dfs序+树状数组+主席树）
http://www.lydsy.com/JudgeOnline/problem.php?id=1146 第一种做法(时间太感人): 第二种做法(rank5,好开心) ================ ...
- Struts1与Struts2的12点区别
Struts1与Struts2的12点区别 1) 在Action实现类方面的对比:Struts 1要求Action类继承一个抽象基类:Struts 1的一个具体问题是使用抽象类编程而不是接口.Str ...
- Struts2_ValueStack,OGNL详解
一.ValueStack 1.ValueStack是一个接口,在struts2中使用OGNL(Object-Graph Navigation Language)表达式实际上是使用实现了Value ...
- 用javascript协助导入图片
用javascript协助导入图片 需求 先说说需求.春节回家见爸妈,老爸迷上了摄影.他把平时的照片都上传到了 成都图片网, 这个成都图片网专门有一个 "快拍成都" 的版块,用于大 ...
- QComboBox 和 QSpinBox 使用方法
Qt中QComboBox 和 QSpinBox 是两个很常用的空间,QComboBox 是下拉菜单,而 QSpinBox 是调参数的神器,所以它们的用法十分必要熟练掌握. 首先来看 QComboBox ...
- IP地址在数据库里面的存储方式
大多数公司的表结构都需要经过DBA进行审核,有时候你会看到存储IP地址采用varchar(15),这种方式都是传统的做法,这种方法需要占用15个字节,那么有更省空间的做法么?肯定是有的,那就是用int ...
- 【iCore2双核心板视频教程三】iM_LAN 100M 以太网模块TCP压力测试（更新视频教程）
============================== 技术论坛:http://www.eeschool.org 博客地址:http://xiaomagee.cnblogs.com 官方网店:h ...
- Grunt教程——初涉Grunt
前端自动化,这样的一个名词听起来非常的有吸引力,向往力.当今时代,前端工程师需要维护的代码变得及为庞大和复杂,代码维护.打包.发布等流程也 变得极为繁琐,同时浪费的时间和精力也越来越多,当然人为的错误 ...