angularJS Directive学习
Directive 指令
直接上实例
index.html
<!doctype html>
<html ng-app="drag">
<head>
<script src="http://code.angularjs.org/angular-1.1.0.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<span draggable>Drag ME</span> <div enter>I am Directive</div>
</body>
</html>
script.js:
var dragDir=angular.module('drag', []);
dragDir.directive("enter", function () {
return function (scope, element) {
element.bind("mouseenter", function () {
alert("enter");
});
};
});
dragDir.directive('draggable', function($document) {
var startX=0, startY=0, x = 0, y = 0;
return function(scope, element, attr) {
element.css({
position: 'relative',
border: '1px solid red',
backgroundColor: 'lightgrey',
cursor: 'pointer'
});
element.bind('mousedown', function(event) {
startX = event.screenX - x;
startY = event.screenY - y;
$document.bind('mousemove', mousemove);
$document.bind('mouseup', mouseup);
}); function mousemove(event) {
y = event.screenY - startY;
x = event.screenX - startX;
element.css({
top: y + 'px',
left: x + 'px'
});
} function mouseup() {
$document.unbind('mousemove', mousemove);
$document.unbind('mouseup', mouseup);
}
}
});
oK!然后来学习一些概念性的东西!
“指令”:
AngularJS的HTML编译器能让浏览器识别新的HTML语法。它能让你将行为关联到HTML元素或者属性上,甚至能让你创造具有自定义行为的新元素。AngularJS称这种行为扩展为“指令”
指令指示的是“当关联的HTML结构进入编译阶段时应该执行的操作”。本质上只是一个当编译器编译到相关DOM时需要执行的函数
编译器(complier):
编译器是AngularJS提供的一项服务,它通过遍历DOM来查找和它相关的属性。整个编译的过程分为两个阶段。
编译: 遍历DOM并且收集所有的相关指令,生成一个链接函数。
链接: 给指令绑定一个作用域,生成一个动态的视图。作用域模型的任何改变都会反映到视图上,并且视图上的任何用户操作也都会反映到作用域模型。这使得作用域模型成为你的业务逻辑里唯一要关心的东西。
angularJS Directive学习的更多相关文章
- angularjs directive学习心得
一些常见的错误 在angularjs里,创建directive时,directive的名称应该要使用驼峰式,例如myDirective,而在html里要调用它的时候,就不能用驼峰式了,可以用my-di ...
- AngularJS Directive 学习笔记
指令 Directive 指令要点 大漠老师的教学节点 解析最简单的指令 hello: 匹配模式 restrict 解析最简单的指令 hello: template.tempmlateUrl.$tem ...
- 学习AngularJs:Directive指令用法(完整版)
这篇文章主要学习AngularJs:Directive指令用法,内容很全面,感兴趣的小伙伴们可以参考一下 本教程使用AngularJs版本:1.5.3 AngularJs GitHub: http ...
- 学习AngularJs:Directive指令用法
跟我学AngularJs:Directive指令用法解读(上) http://blog.csdn.net/evankaka/article/details/51232895 跟我学AngularJs: ...
- Angularjs directive全面解读(1.4.5)
说到Angularjs directive即指令,可以这么说Angularjs的灵魂就是指令,学会Angularjs指令那么你的Angularjs的武功就修炼了一半了,当然这只是鄙人的一点点独到见解, ...
- AngularJs:Directive指令用法
摘自:http://www.jb51.net/article/83051.htm 摘要:Directive(指令)是AngularJ非常强大而有有用的功能之一.它就相当于为我们写了公共的自定义DOM元 ...
- 【js类库AngularJs】学习angularJs的指令(包括常见表单验证,隐藏等功能)
[js类库AngularJs]学习angularJs的指令(包括常见表单验证,隐藏等功能) AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀 ...
- 50.AngularJs directive详解及示例代码
转自:https://www.cnblogs.com/best/tag/Angular/ 本教程使用AngularJs版本:1.5.3 AngularJs GitHub: https://github ...
- angularjs directive 实例 详解
前面提到了angularjs的factory,service,provider,这个可以理解成php的model,这种model是不带html的,今天所说的directive,也可以理解成php的mo ...
随机推荐
- Gentoo本地化设置--时区、时钟、字体、中文环境
时区 你需要选择时区让系统知道你的地理位置,以保持正确的时间.在/usr/share/zoneinfo中查找你的时区.然后在/etc/conf.d/clock中设置时区.请忽略/usr/share/z ...
- 【Office Web Apps】在 SharePoint 中使用 Office Web Apps
在 SharePoint 中使用 Office Web Apps 在安装并配置了 Microsoft Office Web Apps 的 SharePoint 网站上,通过 Office Web Ap ...
- Newtonsoft.Json使用
SkuBean sb = (SkuBean)Newtonsoft.Json.JsonConvert.DeserializeObject(jobj.ToString(), typeof(SkuBean) ...
- MYSQL:SQL中Group By的使用
SQL中Group By的使用 1.概述 2.原始表 3.简单Group By 4.Group By 和 Order By 5.Group By中Select指定的字段限制 6.Group By ...
- Redis简介二
一.直接安装 1.Windows版本的Redis下载地址:https://github.com/dmajkic/redis/downloads ,选择一个你想要下载的版本下载即可~ ...
- (转载)测试工具monkey
转自http://www.418log.org/post-32.html 1)进入shell 在桌面点开始--运行 输入cmd 点确定 或打开 cmd.exe 进入sdk tools目录如: 1 C: ...
- HDU 5795 A Simple Nim
打表找SG函数规律. #pragma comment(linker, "/STACK:1024000000,1024000000") #include<cstdio> ...
- java计数器CountDownLatch
CountDownLatch里面有个属性为state,当为零时触发代码往下执行,代码如下: package threadLock; import java.util.Random; import ja ...
- 在选定的数据源上未找到名为“TitleSub”的字段或属
在.NET开发过程中时常会遇到“在选定的数据源上未找到名为“TitleSub”的字段或属性”的错误”,导致这类错误的原因有很多,在我的项目中,详细情况是这样:1.有两个控件:DropDownList类 ...
- wps制作目录
01 设置标题为.标题1.标题2,标题302 引用--插入目录03 配置文档结构图.查看--可快速回到目录