AngularJs:Directive指令用法
摘自：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:Directive指令用法的更多相关文章
- 学习AngularJs:Directive指令用法
跟我学AngularJs:Directive指令用法解读(上) http://blog.csdn.net/evankaka/article/details/51232895 跟我学AngularJs: ...
- 学习AngularJs:Directive指令用法（完整版）
这篇文章主要学习AngularJs:Directive指令用法,内容很全面,感兴趣的小伙伴们可以参考一下 本教程使用AngularJs版本:1.5.3 AngularJs GitHub: http ...
- AngularJS directive 指令相关记录
.... .directive('scopeDemo',function(){ return{ template: "<div class='panel-body'>Name: ...
- AngularJS的指令用法
scope的绑定策略: @ :把当前属性作为字符串传递,你还可以绑定来自外层scope的值,在属性值中插入 {{}}即可 示例代码: scopeAt.html <!doctype html> ...
- AngularJS常用指令用法详解
ng-class 1>ng-init ng-bind 11111 2>ng-class 111 3>ng-repeat 3.1-数据绑定 ng-repeat可以绑定数组和 ...
- angularJs 自定义指令传值---父级与子级之间的通信
angularJs自定义指令用法我忽略,之前有写过,这里只说一下父子级之间如何传值: 例如: 模块我定义为myApp,index.html定义 <my-html bol-val="bo ...
- 【js类库AngularJs】学习angularJs的指令（包括常见表单验证，隐藏等功能）
[js类库AngularJs]学习angularJs的指令(包括常见表单验证,隐藏等功能) AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀 ...
- AngularJS中Directive指令系列 - 基本用法
参考: https://docs.angularjs.org/api/ng/service/$compile http://www.zouyesheng.com/angular.html Direct ...
- angularjs中directive指令与component组件有什么区别？
壹 ❀ 引 我在前面花了两篇博客分别系统化介绍了angularjs中的directive指令与component组件,当然directive也能实现组件这点毋庸置疑.在了解完两者后,即便我们知道co ...
随机推荐
- 下列可以用来解析XML的是（ ）
A.CSS B.DTD C.SAX D.XSL 解答:C java解析xml文件四种方式:SAX DOM JDOM DOM4J
- css -- outline轮廓
outline:#00ff00 solid thick; 边框参数: 样式: none:默认,无轮廓 dotted:点状轮廓 dashed:虚线轮廓 solid:实现轮廓 double:双线轮廓,宽度 ...
- Yii2自带验证码实现
总共分为三个方面:控制器配置.模型rules配置和视图配置. 第一步:控制器配置 将下列代码配置在actions中,请求验证码链接对应为 “控制器/captcha” 'captcha' => [ ...
- jquery获取点击控件的绝对位置简单实例
在使用jquery的过程中,想取得当前点击input的绝对位置而去显示一个div,jquery本身提供offset和position这个两个方法,但position官方解释是relative to t ...
- jquery的委托处理
1.基本用法: javascript的事件模型,采用”冒泡”模式,也就是说,子元素的事件会逐级向上”冒泡”,成为父元素的事件. 利用这一点,可以大大简化事件的绑定.比如,有一个表格(table元素) ...
- cesium可视化空间数据2
圆柱圆锥体 <!DOCTYPE html> <html> <head> <!-- Use correct character set. --> < ...
- mysqldump进行数据库的全备时,备份数据库的顺序是什么,就是先备份哪个库,然后再备份哪个库
需求描述: 今天在用mysqldump工具进行数据库的备份的时候,突然想了一个问题,比如我有10个库要进行备份 那么是先备份哪个,然后再备份哪个呢,所以,做了实验,验证下. 操作过程: 1.使用--a ...
- 改善C#程序的建议4：C#中标准Dispose模式的实现
http://www.cnblogs.com/luminji/archive/2011/03/29/1997812.html 需要明确一下C#程序(或者说.NET)中的资源.简单的说来,C#中的每一个 ...
- Extjs学习笔记--（四，基本函数介绍）
Ext是Extjs的命名空间,为Extjs框架提供唯一的全局变量 这样做可以避免冲突,便于代码维护 1,apply和applyif方法 apply=function(object, config, d ...
- Python 入门（九）迭代
什么是迭代 在Python中,如果给定一个list或tuple,我们可以通过for循环来遍历这个list或tuple,这种遍历我们成为迭代(Iteration). 在Python中,迭代是通过 for ...