总结自
http://www.imooc.com/learn/156
AngularJS权威教程
一,指令基础概念
1,第一个指令
<my-directive></my-directive>
假设我们已经创建了一个完整的HTML文档,其中包含了AngularJS,并且DOM中已经用ng-app指令标识出了应用的根元素,当AngularJS编译HTML时就会调用指令。myDirective指令的定义看起来是这样的:
angular.module('myApp',[])
.directive('myDirective',function() {
return {
restrict: 'E',template: '<a href="http://google.com">Click me to go to Google</a>'
};
});
2,基础概念
通过AngularJS模块API中的.directive()方法,我们可以通过传入一个字符串和一个函数来注册一个新指令。其中字符串是这个指令的名字,指令名应该是驼峰命名风格的,函数应该返回一个对象。
当AngularJS启动应用时,它会把第一个参数当作一个字符串,并以此字符串为名来注册第二个参数返回的对象。AngularJS编译器会解析主HTML的DOM中的元素、属性、注释和CSS类名中使用了这个名字的地方,并在这些地方引用对应的指令。当它找到某个已知的指令时,就会在页面中插入指令所对应的DOM元素。
指令的工厂函数只会在编译器第一次匹配到这个指令时调用一次。此时,就开始了一个指令的生命周期,指令的生命周期开始于$compile方法并结束于link方法
二,restrict—匹配模式
1,基础概念
模式 | 解释 | 示例 |
---|---|---|
E | 元素 | <hello></hello> |
A(默认) | 属性 | <div hello></div> |
C | 样式类 | <div class="hello"></div> |
M | 注释 | <!-- directive:hello --> |
2,示例
<!doctype html>
<html ng-app="MyModule">
<head>
<Meta charset="utf-8">
</head>
<body>
<hello></hello> <!--元素E-->
<div hello></div> <!--属性A-->
<div class="hello"></div> <!--样式C-->
<!-- directive:hello --> <!--注释M-->
<div></div>
</body>
<script src="lib/angular/angular.min.js"></script>
<script src="Directive_Hello.js"></script>
</html>
var myModule = angular.module("MyModule",[]);
myModule.directive("hello",function () {
return {
restrict: 'AEMC',template: '<div>hi everyone!</div>',replace: true
}
});
三,template—模版引入
1,template(字符串或函数)
template参数是可选的,必须被设置为以下两种形式之一:
- 一段HTML文本;
- 一个可以接受两个参数的函数,参数为tElement和tAttrs,并返回一个代表模板的字符串。tElement和tAttrs中的t代表template,是相对于instance的。
2,templateUrl(字符串或函数)
templateUrl是可选的参数,可以是以下类型:
模板加载后,AngularJS会将它默认缓存到$templateCache服务中!
所以在实际生产中,可以提前将模板缓存!
3,$templateCache
var myModule = angular.module("MyModule",[]);
//注射器加载完所有模块时,此方法执行一次
myModule.run(function ($templateCache) {
$templateCache.put("hello.html","<div>hi everyone!</div>");
});
myModule.directive("hello",function ($templateCache) {
return {
restrict: 'AEMC',template: $templateCache.get("hello.html"),replace: true
}
});