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 ...
随机推荐
- C++ 类 & 对象
C++ 类 & 对象C++ 在 C 语言的基础上增加了面向对象编程,C++ 支持面向对象程序设计.类是 C++ 的核心特性,通常被称为用户定义的类型. 类用于指定对象的形式,它包含了数据表示法 ...
- 【转】C# URL短地址压缩算法及短网址原理解析
这篇文章主要介绍了C# URL短地址压缩算法及短网址原理解析,本文重点给出了算法代码,需要的朋友可以参考下 短网址应用已经在全国各大微博上开始流行了起来.例如QQ微博的url.cn,新郎的sinaur ...
- linux -- 修改文件
vi编辑器有三种模式:命令模式,编辑模式,末行模式 打开vi后首先是命令模式,用i,o,a等进入编辑模式, 按esc退出编辑模式,回到命令模式. 在命令模式下输入:wq表示保存退出,:wq!强制保存退 ...
- 双卡手机怎么指定SIM卡打电话
双卡手机如何指定SIM卡打电话 package com.example.dualsimtest; import android.app.Activity; import android.content ...
- Unity3D - 详解Quaternion类（二）
OK,不做引子了,接上篇Unity3D - 详解Quaternion类(一)走起! 四.Quaternion类静态方法 Quaternion中的静态方法有9个即:Angle方法.Dot方法.Euler ...
- Oracle 12c安装详细步骤，带截图
1,在官网上下载oracle的压缩文件,两个都要下载. 并两个同时选中解压在一个文件夹里面. 2,解压之后,如下图,点击setup.exe稍等一会儿 ,3,开始安装: 不选点击下一步,或者直接点击下一 ...
- CleanMyMac 3.7.5最强中文版_激活码_破解版_下载_注册码
版权归作者所有,任何形式转载请联系作者.作者:缘来远去(来自豆瓣)来源:https://www.douban.com/note/612586476/ 最新版CleanMyMac 3中文版本已经发布快要 ...
- mysql 启动报错--发现系统错误2，系统找不到指定的文件。
解决方法: 控制面板--找到mysql程序--修复
- 五大移动GPU厂商
<谁能笑傲江湖?移动处理器门派那些事儿>一文中我们把2012年的移动处理器的厂商做了一番介绍,并依照各自的属性给划分了门派.既然把他们称为江湖门派.那么每一个门派总要有自己的绝活.移动处理 ...
- “浪潮杯”山东省第五届ACM大学生程序设计竞赛(总结贴)
第一次參加省赛有点小激动,尽管是作为打星队參赛,但心情却是上下起伏. 5月9号晚上11点多到威海,有点略冷.可是空气比淄博好多了,大家到了旅馆的时候都非常晚了,抱怨了一下三星级的酒店的待遇,喝杯咖啡早 ...