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 ...
随机推荐
- jquery-ui-multiselect 的使用
@model Gd.NetSign.Controllers.DTO.WsaleFundManageDTO @{ ViewBag.Title = "ShowDUYUN"; //Lay ...
- XP 右键扩展设置 1.0 免费绿色版
软件名称: xp右键扩展设置软件 1.0 免费绿色版软件语言: 简体中文授权方式: 免费软件运行环境: Win7 / Vista / Win2003 / WinXP / Win2008软件大小: 57 ...
- csv格式导出文件
先上传连个图片看看效果,这是界面效果dwz框架(springmvc开发) 点击导出csv效果图 js部分的代码(带条件查询的csv导出): function exportReportCsv(){ ex ...
- Mac 必备软件 Quicksilver
http://www.xdanger.com/2007/03/30/000067.html
- 2.Perl 多线程:Threads(线程返回值)
use warnings; use strict; use threads; sub TEST{ print "Hello, World!\n"; 'a'/); } #返回列表方法 ...
- mongoDB7--游标
之前我们学习了"增删改查"四中语法和查询表达式的深入学习,我们已经掌握了一定的操作mongodb数据的能力,那么接下来我们就要考虑我们的操作的效率问题了.(1)游标介绍如果我们查询 ...
- Ip 讲解
IP地址分类以及C类IP地址的子网划分 国际规定:把所有的IP地址划分为 A,B,C,D,E A类地址:范围从0-127,0是保留的并且表示所有IP地址,而127也是保留的地址,并且是用于测试环回用的 ...
- MFC中spin control使用
1.绑定spin和edit m_Spin.SetBuddy(GetDlgItem(m_Edit1)); m_Spin.SetRange(0,100); 2.实现数值的增减 双击控件添加消息 void ...
- MFC中组合框CComboBox的使用
假如添加三行数据,其中当选择前两行时,提示自定义提示框信息,选择第三行时,提示当前字符串的内容,实现如下: void Cuse_demo_dllDlg::OnCbnSelchangeCombo1(){ ...
- 一起来用css画画
hello,大白来了... <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> ...