HTML元素由一个开始标签和一个结束标签组成,基于对此的理解,指令本质上就是AngularJS扩展具备自定义功能的HTML元素的途径。简单理解指令就是自定义的HTML元素和属性。javascript
AngularJS指令包括内置和自定义指令,其中内置指令是打包在AngularJS内部的指令。全部内置指令的命名空间都使用ng做为前缀。html
注:为了防止命名空间冲突,不要在自定义指令前加ng前缀。java
内置指令包括:express
ng-href, ng-src 是类布尔属性;浏览器
ng-disabled, ng-checked ,ng-readonly ,ng-selected,ng-class ,ng-style 是布尔属性;缓存
注:根据HTML标准的定义,布尔属性表明一个 true 或 false 值。当这个属性出现时,这个属性的值就是 true (不管实际定义的值是什么) 。若是未出现,这个属性的值就是 false 。安全
<html ng-app="myApp"> <!-- 应用的$rootScope --> <my-directive></my-directive> </html>
咱们首先已经建立了一个完整的HTML的文档,其中包含了AngularJS,而且DOM中已经用ng-App标识出应用的元素,当AngularJS编译HTML时就会调用指令。服务器
angular.module('myApp',[]) .directive('myDirective', function() { return { restrict: 'E', template: '\<div> <-- single root element -->\ <a href="http://baidu.com">Click me</a>\ <h1>When using two elements, wrap them in a parent element</h1>\ </div>\' }; });
经过AngularJS模块API中的.directive()方法,咱们能够经过传入一个字符串和一个函数来注册一个新指令。其中字符串就是这个指令的名字,指令名应该是驼峰命名风格的,函数应该返回一个对象。 directive()方法返回的对象包含了用来定义和配置指令所需的方法和属性。app
restrict 是一个可选的参数,它告诉AngularJS这个指令在DOM中能够何种形式被声明。restrict设置能够指定以元素(E) 、属性(A) 、类(C)或注释(M)的格式来调用指令,用来声明前面建立指令的合法格式,默认AngularJS认为 restrict 的值是属性(A),即以属性的形式来进行声明。异步
// E(元素) <my-directive></my-directive> // A(属性,默认值) <div my-directive="expression"></div> // C(类名) <div class="my-directive:expression;"></div> // M(注释) <--directive:my-directive expression-->
注:虽然有不少方式能够声明指令,可是推荐使用属性方式声明,这是由于其跨浏览器兼容性比较好。尽可能避免用注释方式来声明属性。这种方式最初被用来声明由多个标签组成的指令。这种方法在某些状况下特别有用,好比在 元素内使用 ng-repeat指 令 , 但 在 AngularJS 1.2 中 ng-repeat 可 以 通 过 ng-repeat-start 和ng-repeat-end 来更优雅地知足这个需求,注释模式就没有什么用武之地了。若是你对此很好奇,能够经过Chrome开发者工具的 element 标签观察一下使用ng-repeat 时被隐式添加的注释。
replace 方法会使用自定义元素取代指令声明,而不是嵌套在其内部。replace 是一个可选参数,若是设置了这个参数,值必须为 true ,由于默认值为 false 。默认值意味着模板会被看成子元素插入到调用此指令的元素内部。
template参数是可选的,能够是一段HTML文本,也能够是一个能够接受两个参数的函数,参数为 tElement 和 tAttrs ,并返回一个表明模板的字符串。
tElement 和 tAttrs 中的 t 表明 template ,是相对于 instance 的。若是模板字符串中含有多个DOM元素,或者只由一个单独的文本节点构成,那它必须被包含在一个父元素内。换句话说,必须存在一个根DOM元素,另外,注意每一行末尾的反斜线,这样AngularJS才能正确解析多行字符串。
在实际生产中,更好的选择是使用 templateUrl 参数引用外部模板,由于多行文本阅读和维护起来对咱们来讲都是一场噩梦。
//template.html <div> <a href="http://baidu.com">Click me</a> <h1>When using two elements, wrap them in a parent element</h1> </div>
angular.module('myApp',[]) .directive('myDirective', function() { return { restrict: 'E', templateUrl: 'template.html' }; });
templateUrl 是可选的参数,一个是表明外部HTML文件路径的字符串,一个是能够接受2个参数,参数为tElement和tAtrrs,并返回一个外部HTML文件路径的字符串。
不管哪一种方式,模板的URL都将经过AngularJS内置的安全层,特别是$getTrustedResourceUrl,这样能够保护模板不会被不信任的源加载。
默认状况下,调用指令时会在后台经过Ajax来请求HTML模板文件。
注:在本地开发时,须要在后台运行一个本地服务器,用以从文件系统加载HTML模板,不然会致使Cross Origin Request Script(CORS)错误。模板加载时异步的,意味着编译和连接要暂停,等待模板加载完成。可是,经过Ajax异步加载大量的模板将严重拖慢一个客户端的速度。为了不延迟,能够在部署应用以前对HTML模板进行缓存。
参考资料:
【美】Ari Lerner 著《AngularJS 权威教程》
转载时请注明:来自w-rain的我的博客