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应用的话它就显得乏力了.所以我做了一些工作(你也可以觉得是小花招)来让 ...
随机推荐
- OpenJudge计算概论-找最大数序列
/*===================================== 找最大数序列 总时间限制: 1000ms 内存限制: 65536kB 描述 输入n行(n 不大于 30),每行不超过10 ...
- RabbitMQ 集群与高可用配置
集群概述 通过 Erlang 的分布式特性(通过 magic cookie 认证节点)进行 RabbitMQ 集群,各 RabbitMQ 服务为对等节点,即每个节点都提供服务给客户端连接,进行消息发送 ...
- python3_RoboBrowser_test
python3_RoboBrowser_test selenium库作为交互是非常方便的,但是却大大加长了加载的时间,例如需要渲染网址,加载js,造成在爬虫过程中时间变长. 因此找到一个虚拟的浏览器, ...
- python之路之正则表达式
匹配格式^ 匹配字符串的开头$ 匹配字符串的结尾. 除了换行符外的所有字符[...] 用来表示一组字符,,单独列出:[amk]匹配'a','m'或'k'[^..] 不在[]中的字符:[^abc]匹配除 ...
- replace() replace_copy()
int a[] = {1,2,3,3,4}; vector<int> v(a, a+5); vector<int> v2; //replace(v.begin(), v.end ...
- C#文本文件(.txt)读写
目录 前言 读取txt文件 写入txt文件 前言 计算机在最初只支持ASCII编码,但是后来为了支持其他语言中的字符(比如汉字)以及一些特殊字符(比如€),就引入了Unicode字符集.基于Unico ...
- 基于HDInsight 3.4 HBase集群规划参考
基于linux 创建HDInsight HBase集群,选择最小配置,zk(3).NN(2).WN(2),集群节点默认组件服务规划如下 NN0: Active NameNode /HDFS ZKFai ...
- 【linux】日志管理
1.日志文件内容的一般格式 (1)事件发生的日期与时间: (2)发生此事件的主机名: (3)启动此事件的服务名称或函数名称: (4)该信息的实际数据内容. 例如:Mar 14 15:38:00 www ...
- 【宋红康学习日记1】关于环境变量设置出现的问题——找不到或无法加载主类 java
忙活了一整天,最后被自己的小愚蠢所拜倒,不过也是学习到了很多,知道了出现问题怎样去解决. 问题是在cmd运行环境中编译我的第一个小程序HelloWorld时,javac命令可以运行,但是java命令后 ...
- bzoj2589: Spoj 10707 Count on a tree II
Description 给定一棵N个节点的树,每个点有一个权值,对于M个询问(u,v),你需要回答u xor lastans和v这两个节点间有多少种不同的点权.其中lastans是上一个询问的答案,初 ...