1.replace——最简单的使用方法，直接将自定义标签替换为模板内的内容：
html：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript" src="angular.js" ></script> 7 <script type="text/javascript" src="template.js" ></script> 8 </head> 9 <body ng-app="app"> 10 <template></template> 11 </body> 12 </html>
javascipt:
1 var app=angular.module("app",[]) 2 app.directive("template",function(){ 3 return { 4 restrict: 'E', 5 template: '<div>Hi template</div>', 6 replace: true 7 } 8 })
2. transclude(变换）——将自定义标签替换成我们所编写的HTML模板，但是自定义标签内部的内容会保留在具有ng-transclude指令的标签内：
html:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript" src="angular.js" ></script> 7 <script type="text/javascript" src="template.js" ></script> 8 </head> 9 <body ng-app="app"> 10 <hello> 11 <br> 12 <span>使用transclude，自定义标签内部的内容会被保留在模板标签中具有ng-transclude指令的标签内部</span> 13 </hello> 14 <hello></hello> 15 </body> 16 </html>
javascript:
1 var appModule = angular.module('app', []); 2 appModule.directive('hello', function() { 3 return { 4 restrict: 'E', 5 template: '<div>Hi there <span ng-transclude>这里的内容不会显示，只会显示自定义标签内部的内容</span></div>', 6 transclude: true 7 }; 8 });
3. link函数——绑定事件到元素上，一个简单的典型的插件就能实现了
css：
1 .expander { 2 border: 1px solid black; 3 width: 250px; 4 } 5 6 .expander>.title { 7 background-color: black; 8 color: white; 9 padding: .1em .3em; 10 cursor: pointer; 11 } 12 13 .expander>.body { 14 padding: .1em .3em; 15 }
html:
1 var app=angular.module("app",[]) 2 app.directive("temp",function(){ 3 return { 4 restrict : "EA", 5 replace : true, 6 transclude : true, 7 scope : { 8 title : '=tempTitle' 9 }, 10 template : '<div>' 11 + '<div class="title" ng-click="toggle()">{{title}}</div>' 12 + '<div class="body" ng-transclude ng-show="showMe"></div>' 13 + '</div>', 14 link : function(scope,element,attrs){ 15 scope.showMe=false; 16 scope.toggle=function(){ 17 scope.showMe=!scope.showMe 18 } 19 } 20 } 21 }) 22 23 app.controller("tempCtrl",function($scope){ 24 $scope.title="点我，你能看到更多" 25 $scope.text="是不是多了几个字" 26 })
html：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <script type="text/javascript" src="angular.js" ></script> 6 <script type="text/javascript" src="temp.js"></script> 7 <title></title> 8 </head> 9 <body ng-app="app"> 10 <div ng-controller="tempCtrl"> 11 <temp class="expander" temp-title="title">{{text}}</temp> 12 </div> 13 </body> 14 </html>