摘自：http://www.jb51.net/article/83051.htm

摘要：Directive（指令）是AngularJ非常强大而有有用的功能之一。它就相当于为我们写了公共的自定义DOM元素或CLASS属性或ATTR属性，并且它不只是单单如此，你还可以在它的基础上来操作scope、绑定事件、更改样式等。通过这个Directive，我们可以封装很多公共指令，比如分页指令、自动补全指令等等。然后在HTML页面里只需要简单的写一行代码就可以实现很多强大的功能。一般情况下，需要用Directive有下面的情景：
1. 使你的Html更具语义化，不需要深入研究代码和逻辑即可知道页面的大致逻辑。
2. 抽象一个自定义组件，在其他地方进行重用。

一、Directive的定义及其使用方法
AngularJs的指令定义大致如下

angular.module("app",[]).directive("directiveName",function(){

 return{

 //通过设置项来定义

 };

})

Directive可以放置于元素名、属性、class、注释中。下面是引用myDir这个directive的等价方式。（但很多directive都限制为“属性”的使用方式）

如下一个实例 ：

<!DOCTYPE html>

<html lang="zh" ng-app="myApp">

<head>

 <meta charset="UTF-8">

 <title>AngularJS入门学习</title>

 <script type="text/javascript" src="./1.5.3/angular.min.js"></script>

</head>

<body>

<hello-world></hello-world>

</body>

<script type="text/javascript">

var app = angular.module('myApp', []);

app.directive('helloWorld', function factory(injectables) {

 return  {

 　　priority: 0,

 　　template: '<div></div>',

 　　templateUrl: 'directive.html',

 　　replace: false,

 　　transclude: false,

 　　restrict: 'A',

 　　scope: false,

 　　compile: function compile(tElement, tAttrs, transclude) {

 　　　　return {

 　　　　　　pre: function preLink(scope, iElement, iAttrs, controller) { ... },

 　　　　　　post: function postLink(scope, iElement, iAttrs, controller) { ... }

　　　　}

　　},

 　　link: function postLink(scope, iElement, iAttrs) { ... }

};

});

</script>

</html>

二、Directive指令内容解读
可 以看到它有8个内容
1.restrict
（字符串）可选参数，指明指令在DOM里面以什么形式被声明；取值有：E(元素),A(属性),C(类),M(注释)，其中默认值为A；当然也可以两个一起用，比如EA.表示即可以是元素也可以是属性。
[html] view plain copy 在CODE上查看代码片派生到我的代码片
E(元素)：<directiveName></directiveName>  
A(属性)：<div directiveName='expression'></div>  
C(类)： <div class='directiveName'></div>  
M(注释)：<--directive:directiveName expression-->  
一般情况下E/A/C用得比较多。
2.priority
(数字)，可选参数，指明指令的优先级，若在单个DOM上有多个指令，则优先级高的先执行；

3.terminal
（布尔型），可选参数，可以被设置为true或false，若设置为true，则优先级低于此指令的其他指令则无效，不会被调用(优先级相同的还是会执行)

4.template（字符串或者函数）可选参数，可以是：
（1）一段HTML文本

（2）一个函数，可接受两个参数tElement和tAttrs
其中tElement是指使用此指令的元素，而tAttrs则实例的属性，它是一个由元素上所有的属性组成的集合（对象）形如：
<hello-world2 title = '我是第二个directive'></hello-world2>  
其中title就是tattrs上的属性

可以看到指令中还用到了hello-world2中的标签中的 title字段

5.templateUrl（字符串或者函数），可选参数，可以是
（1）一个代表HTML文件路径的字符串

（2）一个函数，可接受两个参数tElement和tAttrs（大致同上）

注意：在本地开发时候，需要运行一个服务器，不然使用templateUrl会报错 Cross Origin Request Script（CORS）错误。由于加载html模板是通过异步加载的，若加载大量的模板会拖慢网站的速度，这里有个技巧，就是先缓存模板
你可以再你的index页面加载好的，将下列代码作为你页面的一部分包含在里面。

<script type='text/ng-template' id='hello.html'>

 <div><h1>Hi ~~~</h1></div>

</script>

这里的id属性就是被设置在templateUrl上用的。

 6.replace
（布尔值），默认值为false，设置为true时候，HTML中 hello-world这个标签不在了，反之，则存在

7.scope
（1）默认值false。表示继承父作用域;

（2）true。表示继承父作用域，并创建自己的作用域（子作用域）;

（3）{}。表示创建一个全新的隔离作用域；

详细请参见

AngularJS 指令的 Scope (作用域)

AngularJs:Directive指令用法的更多相关文章

  1. 学习AngularJs:Directive指令用法

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

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

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

  3. AngularJS directive 指令相关记录

    .... .directive('scopeDemo',function(){ return{ template: "<div class='panel-body'>Name: ...

  4. AngularJS的指令用法

    scope的绑定策略: @ :把当前属性作为字符串传递,你还可以绑定来自外层scope的值,在属性值中插入 {{}}即可 示例代码: scopeAt.html <!doctype html> ...

  5. AngularJS常用指令用法详解

    ng-class 1>ng-init   ng-bind 11111 2>ng-class 111 3>ng-repeat 3.1-数据绑定     ng-repeat可以绑定数组和 ...

  6. angularJs 自定义指令传值---父级与子级之间的通信

    angularJs自定义指令用法我忽略,之前有写过,这里只说一下父子级之间如何传值: 例如: 模块我定义为myApp,index.html定义 <my-html bol-val="bo ...

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

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

  8. AngularJS中Directive指令系列 - 基本用法

    参考: https://docs.angularjs.org/api/ng/service/$compile http://www.zouyesheng.com/angular.html Direct ...

  9. angularjs中directive指令与component组件有什么区别？

     壹 ❀ 引 我在前面花了两篇博客分别系统化介绍了angularjs中的directive指令与component组件,当然directive也能实现组件这点毋庸置疑.在了解完两者后,即便我们知道co ...

随机推荐

  1. sixxpack破解的文章！【转】

    星期天闲着没事玩游戏,玩游戏不能无外挂.于是百度了半天,找到了一个,看介绍貌似不错,就下载了下来.一看,竟然是用.net写的,下意识地Reflector了一下.发现竟是一个叫actmp的程序集.如图: ...

  2. 【Java NIO的深入研究2】RandomAccessFile的使用

    RandomAccessFile RandomAccessFile是用来访问那些保存数据记录的文件的,你就可以用seek( )方法来访问记录,并进行读写了.这些记录的大小不必相同:但是其大小和位置必须 ...

  3. u3d性能优化

    原文地址:http://blog.csdn.net/molti/article/details/8520418 性能优化需要从多方面入手,大家在项目中遇到的问题还是很普遍的,欢迎大家补充. 图形方面: ...

  4. linux convert命令安装及使用

    linux下ImageMagick安装和使用 检查系统有无安装ImageMagick shell> rpm -qa | grep ImageMagick 没有就开始安装ImageMagick s ...

  5. JBPM4.4_jBPM4.4应用(与Spring集成&自行控制事务等)

    1. jBPM4.4应用 1.1. 与Spring集成(jBPM4.4 Developers Guide, Chapter 17. Spring Integration) 1.1.1. 在jbpm.c ...

  6. EF--CodeFirst

    1,增加EntityFramework的引用 2,创建实体类 public class Invoice { public Invoice() { LineItems = new List<Lin ...

  7. Redhat系列使用ISO或者光盘制作yum本地安装源

    适用系统:redhat系列 示例系统:CentOS 6x86_64 环境:虚拟机   有时候做实验又不能联网的情况下想装一款软件时,经常会搞的头大:难道要去系统镜像中一个个拷出来再用rpm安装?各种依 ...

  8. iOS打电话、发短信、发邮件功能开发

    本文转载至 http://www.lvtao.net/ios/506.html 今天把APP里常用小功能 例如发短信.发邮件.打电话.全部拿出来简单说说它们的实现思路. 1.发短信实现打电话的功能,主 ...

  9. Android 使用ListView显示信息列表

    课程目标1.理解ListView的基础使用2.学会熟练运用两种适配器(ArrayAdapter.SimpleAdapter)3.学会熟练运用两种监听器(OnScrollListener.OnItemC ...

  10. Vscode 修改为中文语言

    1 官网下载最新版的vscode : https://code.visualstudio.com/Download 2 安装之后, 按键 F1  搜索框 输入 language   选择 config ...