angular总结-directive指令基础

总结自

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 -->`

推荐使用元素和属性的方式创建指令
当需要创建带有自己html模版的指令时，使用元素的方式创建指令
当需要为已有的html标签增加功能时，使用属性的方式创建指令

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是可选的参数，可以是以下类型：

一个代表外部HTML文件路径的字符串；
一个可以接受两个参数的函数，参数为tElement和tAttrs，并返回一个外部HTML文件路径的字符串。

模板加载后，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
    }
});