angular指令系统directive

1、匹配模式

var myModule = angular.module("MyModule", []);

myModule.directive("hello", function() {
    return {
        restrict: 'AEMC',//匹配模式，共四个选项（A属性、E元素、M注释、C样式）
        template: '<div>Hi everyone!</div>',
        replace: true
    }

});

对应到html中：

<hello></hello><!-- E元素 -->

<div hello></div><!-- A属性 -->（默认）

<div class="hello"></div><!-- C样式 -->

<!-- directive:hello --><!-- M注释，前后都要有空格！！！ -->
<div></div>

A和E最为常见，当需要创建带有自己模板的指令时，使用元素名称（E）方式创建指令，当需要为已有的html标签添加功能时，使用属性（A）方式。

2、模板

var myModule = angular.module("MyModule", []);
myModule.directive("hello", function() {
    return {
        restrict: 'AECM',
        templateUrl: 'hello.html',//可将大量模板放在一个html文件中
        replace: true
    }
});

若想将模板缓存起来在别的指令中复用，使用<script src="$templateCache.js"></script><!-- 模板缓存，在一个地方定义的模板在另一个地方也可以使用 -->

var myModule = angular.module("MyModule", []);


//注射器加载完所有模块时，此方法执行一次
myModule.run(function($templateCache){
$templateCache.put("hello.html","<div>Hello everyone!!!!!!</div>");
});


myModule.directive("hello", function($templateCache) {
    return {
        restrict: 'AECM',
        template: $templateCache.get("hello.html"),
        replace: true
    }
});

3、replace和transclude

指令中存在嵌套如下：

<hello>
<div>这里是指令内部的内容。</div>
</hello>

使用replace会将内部的div替换掉不显示出来，若要显示，使用transclude：

var myModule = angular.module("MyModule", []);
myModule.directive("hello", function() {
    return {
    restrict:"AE",
    transclude:true,
    template:"<div>Hello everyone!<div ng-transclude></div></div>"
    } 
});

就可以把内部嵌套的语句放到ng-transclude的位置去

直接操作DOM元素不符合angularJS的思想，在指令中进行操作

指令执行的三个阶段：