现今市场上的前端框架也只有AngularJS 拥有自定义指令的功能，并且AngularJS 是目前唯一提供Web应用可复用能力的框架。
指令的几种使用方式：
作为标签（E）：<my-dir></my-dir>
作为属性（A）：<span my-dir="exp"></span>
作为注释（M）：<!-- directive: my-dir exp -->
作为类名（C）：<span class="my-dir: exp;"></span>
自定义指令的配置参数
mainApp.directive('namespaceDirectiveName', function factory(injectables) {
var directiveDefinitionObject = {
restrict: string,//指令的使用方式，包括标签（E），属性（A），类（C），注释（M）
priority: number,//指令执行的优先级
template: string,//指令使用的模板，用HTML字符串的形式表示
templateUrl: string,//从指定的url地址加载模板
replace: bool,//是否用模板替换当前元素，若为false，则append在当前元素上
transclude: bool,//是否将当前元素的内容转移到模板中
scope: bool or object,//指定指令的作用域
controller: function controllerConstructor($scope, $element, $attrs, $transclude){...},//定义与其他指令进行交互的接口函数
require: string,//指定需要依赖的其他指令
link: function postLink(scope, iElement, iAttrs) {...},//以编程的方式操作DOM，包括添加监听器等
compile: function compile(tElement, tAttrs, transclude){
return: {
pre: function preLink(scope, iElement, iAttrs, controller){...},
post: function postLink(scope, iElement, iAttrs, controller){...}
}
}//编程的方式修改DOM模板的副本，可以返回链接函数
};
return directiveDefinitionObject;
});
示例：
mainApp.directive("sayHello",function(){
return {
//配置指令类型：Ｃ（类） Ｅ（标签） Ａ（属性） Ｍ（注释）
restrict:"EA",
//模板：<b ng-transclude>用来告诉指令把内容转移到的位置</b>
template:"<p>hello,<b ng-transclude></b></p>",
//替换
replace:true,
//作用是把内容转移到<b ng-transclude></b>中
transclude:true
};
});
<say-hello>你好！！！</say-hello>