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的思想,在指令中进行操作
指令执行的三个阶段: