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 ...
随机推荐
- PHP 初探
由于不可描述的原因,需要运行一个PHP项目,折腾了半天却无甚效果---概念缺失. 一怒之下,决定还是先了解下PHP本身再说.先得感谢下W3School,介绍简洁明了. PHP是脚本语言! PHP不需要 ...
- 说一下zoom:1的原理，万一被问到呢？
某一天.前同事低着头从鹅厂面试回来.他说他被一道非经常见的问题难倒了. 对方问他知道zoom:1的作用吗? 前同事:清楚浮动啊,触发haslayout. 再问:那你知道zoom:1的工作原理和来龙去脉 ...
- Python的类和函数的魔法
class CustomClass: def customFun(self, id): print("fun_1",id ) if __name__ == '__main__': ...
- QListView的子项的ViewMode
QListView.setViewMode(ViewMode mode) enum QListView::ViewMode Constant Value DescriptionQListV ...
- 手动安装OpenStack Mistral
Prepare packages: $ sudo apt-get install python-dev python-setuptools python-pip libffi-dev libxslt1 ...
- mui.back()返回刷新功能
使用场景:操作某个步骤需要获取用户信息,如果用户未登陆,则跳转登录页面,登陆成功之后使用mui.back()返回父页面,父页面必须刷新. 子页面:登陆页 父页面:跳转登录页的页面 1. 在子页面初始化 ...
- jquery轻量级富文本编辑器Trumbowyg
html: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta http-equiv=&qu ...
- 左侧固定宽度，右侧自适应宽度的CSS布局
BI上有高手专门讨论了这种布局方法,但他用了较多的hack,还回避了IE6的dtd.我在实际使用中,发现回避掉IE6的dtd定义后,会导致ajax模态框无法居中(VS的一个控件,自动生成的代码,很难修 ...
- linux环境,crontab报错Authentication token is no longer valid; new one required You (aimonitor) are not allowed to access to (crontab) because of pam configuration.
问题描述: 今天同事反应,一个系统上的某些数据没有生成,看了下,怀疑定时任务没有执行,就看下了crontab,发现报了下面的错误: [aimonitor@4A-LF-w08 ~]$ crontab - ...
- mysql中什么是物理备份？
需求描述: 今天在看数据库备份,恢复的内容,就是对于一个概念,物理备份的理解,在这里记录下. 概念解释: 物理备份:就是对存储数据库内容的目录和文件的直接拷贝.简单来说,就是对物理文件的拷贝. 文档创 ...