angularJs编写多指令的情况
本实例主要展示controller和link参数的使用.以及多个指令同时作用的情况.
<!DOCTYPE html>
<html ng-app="myModule">
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div>
<div>
<superman strength>动感超人---力量</superman>
</div>
<div>
<superman strength speed>动感超人---力量+速度</superman>
</div>
<div>
<superman strength speed light>动感超人---力量+速度+发光</superman>
</div>
</div> </body>
<script type="text/javascript" src="../js/angular1.4.3.js"></script>
<script type="text/javascript">
var myModule=angular.module("myModule",[]);
myModule.directive("superman", function () {
return{
scope:{},
restrict:"AE",
controller:function($scope){
$scope.abilities=[];
this.addStrength= function () {
$scope.abilities.push("strength");
};
this.addSpeed= function () {
$scope.abilities.push("speed");
};
this.addLight= function () {
$scope.abilities.push('light');
};
},
link: function (scope,element,attrs) {
element.bind("mouseenter", function () {
console.log(scope.abilities);
})
}
}
});
myModule.directive("strength", function () {
return{
require:"^superman",
link: function (scope, element, attrs, supermanCtrl) {
supermanCtrl.addStrength();
}
}
});
myModule.directive("speed", function () {
return{
require:"^superman",
link: function (scope, element, attrs, supermanCtrl) {
supermanCtrl.addSpeed();
}
};
});
myModule.directive("light", function () {
return{
require:"^superman",
link: function (scope,element,attrs,supermanCtrl) {
supermanCtrl.addLight();
}
}
})
</script>
</html>
angularJs编写多指令的情况的更多相关文章
- AngularJs编写指令
<!DOCTYPE html> <html ng-app="app"> <head lang="en"> <meta ...
- AngularJS移动开发中的各种坑
捂脸,辛酸泪ing...... 本文主要涉及部分在移动设备上特有的问题. 相对来说,Jquery侧重DOM操作,AngularJS是以视图模型和双向绑定为核心的. DOM操作的问题 避免使用 jQue ...
- 带你走近AngularJS - 创建自定义指令
带你走近AngularJS系列: 带你走近AngularJS - 基本功能介绍 带你走近AngularJS - 体验指令实例 带你走近AngularJS - 创建自定义指令 ------------- ...
- AngularJS开发经验(转)
AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了.所以我做了一些工作(你也可以觉得是小花招)来让 ...
- AngularJS移动开发中的坑汇总
使用AngualrJs开发移动App已经快半年了,逐渐积累了非常多AngularJS的问题,特别是对于用惯了Jquery的开发人员,转到AngularJS还是须要克服非常多问题的.不像Jquery那样 ...
- AngularJS 2调用.net core WebAPI的几个坑
前几天,按照AngularJS2的英雄指南教程走了一遍,教程网址是http://origin.angular.live/docs/ts/latest/tutorial/. 在步骤完成后,又更进一步,在 ...
- 带你走近AngularJS - 创建自己定义指令
带你走近AngularJS系列: 带你走近AngularJS - 基本功能介绍 带你走近AngularJS - 体验指令实例 带你走近AngularJS - 创建自己定义指令 ------------ ...
- 带你走近AngularJS 之创建自定义指令
带你走近AngularJS 之创建自定义指令 为什么使用AngularJS 指令? 使用过 AngularJS 的朋友应该最感兴趣的是它的指令.现今市场上的前端框架也只有AngularJS 拥有自定义 ...
- AngularJS开发经验
AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了.所以我做了一些工作(你也可以觉得是小花招)来让 ...
随机推荐
- 螺旋矩阵 noip2014普及组
本题可以直接模拟填数字,也可以直接计算结果. 代码一:(这个代码,缺陷在于数组太大,浪费内存啊.另外,循环次数也不少.总之,时间空间的消耗都不小.) /*======================= ...
- struts2异常处理及类型转换
一.struts2对异常的处理 1.自定义局部异常: <action> <exception-mapping result="sonException" exce ...
- html之head,base,meta,title
一个简单的HTML最基本的必须的元素 用于定义文档的头部,是所有头部元素的容器.头部描述了文档的各种属性和信息,绝大多数头部的数据都不会直接显示给读者. 下面这些标签可用在head部分:base,li ...
- ubuntu- eclipse、CDT安装
eclipse的安装: 应用程序->附件->终端 然后输入(中间可能需要你输入密码): ...
- CentOS 6.6 yum 方式安装sunversion 服务器
检查已安装版本 #检查是否安装了低版本的SVN[root@localhost /]# rpm -qa subversion #如果存储旧版本,卸载旧版本SVN[root@localhost modul ...
- bash{} 方法总结
假设我们定义了一个变量为: file=/dir1/dir2/dir3/my.file.txt 我们可以用 ${ } 分别替换获得不同的值: ${file#*/}:拿掉第一条 / 及其左边的字串:dir ...
- mongodb不同版本之间有很大的差异
今天主要说下我为了给mongodb数据库添加authorization,大家应该知道,mongo默认是无auth运行的.这可能是方便小伙伴学习命令吧. 由于之前发布的一个项目,在亚马逊的云上,处于内部 ...
- SPOJ #10657. LOGIC (riddle)
1 line in Ruby(2.0), 36B: p (1..n=gets.to_i).reduce(:*)+2**n-n
- bzoj4716 假摔
Description [题目背景] 小Q最近喜欢上了一款游戏,名为<舰队connection>,在游戏中,小Q指挥强大的舰队南征北战,从而成为了一名 dalao.在游戏关卡的攻略中,可能 ...
- 网页颜色RGB记法和16进制记法转化方法
A=>10,B=>11,C=>12,D=>13,E=>14,F=>15 看一个例子: 254,112,85 255/16 等于 15 余 14 那么它对应的应该是F ...