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学习的更多相关文章

  1. angularjs directive学习心得

    一些常见的错误 在angularjs里,创建directive时,directive的名称应该要使用驼峰式,例如myDirective,而在html里要调用它的时候,就不能用驼峰式了,可以用my-di ...

  2. AngularJS Directive 学习笔记

    指令 Directive 指令要点 大漠老师的教学节点 解析最简单的指令 hello: 匹配模式 restrict 解析最简单的指令 hello: template.tempmlateUrl.$tem ...

  3. 学习AngularJs:Directive指令用法（完整版）

    这篇文章主要学习AngularJs:Directive指令用法,内容很全面,感兴趣的小伙伴们可以参考一下   本教程使用AngularJs版本:1.5.3 AngularJs GitHub: http ...

  4. 学习AngularJs:Directive指令用法

    跟我学AngularJs:Directive指令用法解读(上) http://blog.csdn.net/evankaka/article/details/51232895 跟我学AngularJs: ...

  5. Angularjs directive全面解读（1.4.5）

    说到Angularjs directive即指令,可以这么说Angularjs的灵魂就是指令,学会Angularjs指令那么你的Angularjs的武功就修炼了一半了,当然这只是鄙人的一点点独到见解, ...

  6. AngularJs:Directive指令用法

    摘自:http://www.jb51.net/article/83051.htm 摘要:Directive(指令)是AngularJ非常强大而有有用的功能之一.它就相当于为我们写了公共的自定义DOM元 ...

  7. 【js类库AngularJs】学习angularJs的指令（包括常见表单验证，隐藏等功能）

    [js类库AngularJs]学习angularJs的指令(包括常见表单验证,隐藏等功能) AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀 ...

  8. 50.AngularJs directive详解及示例代码

    转自:https://www.cnblogs.com/best/tag/Angular/ 本教程使用AngularJs版本:1.5.3 AngularJs GitHub: https://github ...

  9. angularjs directive 实例 详解

    前面提到了angularjs的factory,service,provider,这个可以理解成php的model,这种model是不带html的,今天所说的directive,也可以理解成php的mo ...

随机推荐

  1. G - 小晴天老师系列——可恶的墨水瓶

    G - 小晴天老师系列——可恶的墨水瓶 Time Limit: 2000/1000MS (Java/Others)    Memory Limit: 128000/64000KB (Java/Othe ...

  2. 移动前端不得不了解的HTML5 head 头标签（中上篇）

    Meta 标签 meta标签是HTML中head头部的一个辅助性标签,它位于HTML文档头部的 <head> 和 <title> 标记之间,它提供用户不可见的信息.虽然这部分信 ...

  3. input type="file" 的一些问题

    file可以上传文件,但通常 情况下大家都会需要设置文件上传的格式 上传文件的格式由一个 accept 属性来控制 列如: <input type="file" id=&qu ...

  4. 会话技术cookie和session详解

    什么是会话 会话可简单理解为:用户开一个浏览器,点击多个超链接,访问服务器多个web资源,然后关闭浏览器,整个过程称之为一个会话. 会话技术解决了什么问题 每个用户与服务器进行交互的过程中,各自会有一 ...

  5. MFC应用程序编写实例—完整版（原创）

    前段时间,将近花了一周至两周上班和上班后的闲余时间,做了一个用于调试和测试工作项目的应用软件,下面将实现软件的重要步骤及主要功能讲解一遍,方便日后查阅. 程序开始后,提示登录框,输入用户名,密码后,登 ...

  6. hdu_4507_吉哥系列故事——恨7不成妻(鬼畜数位DP)

    题目连接:http://acm.hdu.edu.cn/showproblem.php?pid=4507 题意:中文,不解释,注意的是求的是合法数字的平方和,即(a+b+c+……)^2 题解:数位DP, ...

  7. Storm官方文档翻译之在生产环境集群中运行Topology

    在进群生产环境下运行Topology和在本地模式下运行非常相似.下面是步骤: 1.定义Topology(如果使用Java开发语言,则使用TopologyBuilder来创建) 2.使用StormSub ...

  8. ios小功能

    1.开 发过程中,我们通过http请求,后台返回json数据,而有时数据里某一字段的值为null-,然后我们把此值赋值给 NSArray,NSdictionary,或是NSString,然后我们会判断 ...

  9. CentOS 7 时区设置

    设置时区同样, 在 CentOS 7 中, 引入了一个叫 timedatectl 的设置设置程序. 用法很简单: # timedatectl # 查看系统时间方面的各种状态 $timedatectl  ...

  10. 用caffe给图像的混乱程度打分

    Caffe应该是目前深度学习领域应用最广泛的几大框架之一了,尤其是视觉领域.绝大多数用Caffe的人,应该用的都是基于分类的网络,但有的时候也许会有基于回归的视觉应用的需要,查了一下Caffe官网,还 ...