Angular自定义指令（初级）
对于指令，可以把它简单的理解成在特定DOM元素上运行的函数，指令可以扩展这个元素的功能。Angular包含丰富的指令，同时也允许我们创建自定义的指令。创建指令需要用到directive()方法，语法如下所示：
angular.application('myApp', []) .directive('myDirective', function() { // 返回指令定义对象 return { // 通过设置项来定义指令 }; });
比如现在我要创建一个类似于button的一个指令<my-button></my-button>，看看如何实现：
//default.js var myApp = angular.module('app', []); myApp.directive("myButton",function(){ return {//在这里配置指令 restrict:"E", template:"<div><input type='button' value='button'></div>" }; });
directive方法接收两个参数，第一个是指令名称"myButton"，采用的是驼峰命名方法。然后我们使用时，必须用破折号链接，变成"my-button"，这点别忘记了。第二个参数是一个函数，我们可以把它看作指令的构造函数，在这里面对指令进行一系列配置。
restrict指定该指令的类型，有“ECMA”四种，分别代表Element(元素标签)，Class(类)，Comment（注释），Atrribute（属性）。我们这里指定的E，也就是这个指令是当作html标签来使用。
template是该指令的表现形式，也就是视图结构。这里我们直接使用了imput标签。
定义好了指令后，就可以直接在视图中使用了。
<!doctype html> <html ng-app="app"> <head> <script src="js/angular.js"></script> <script src="js/default.js"></script> </head> <body> <my-button></my-button> </body> </html>
如果想将这个指令作为属性使用，则将restrict设置为A即可，如下所示：
var myApp = angular.module('app', []); myApp.directive("myButton",function(){ return {//在这里定义指令 restrict:"A", template:"<div><input type='button' value='button' onclick='alert(\"button clicked!\")'></div>" }; });然后就可以作为标签的属性使用了:
<div my-button></div>
有时候template的内容过多，我们希望将其单独作为一个html文件，然后通过一个属性引用即可。而templateUrl就可以做到，如下所示：
var myApp = angular.module('app', []); myApp.directive("myButton",function(){ return {//在这里定义指令 restrict:"EA", templateUrl:"button.html" }; });我们将模板的内容移入了一个叫button.html的文档，然后通过templateUrl进行引用。这样是不是清爽了许多。
有时候我们的指令中会包含内容，例如：
<my-label>GAMELoft9</my-label>
//default.js var myApp = angular.module('app', []); myApp.directive("myLabel",function(){ return {//在这里定义指令 restrict:"E", template:"<div><em>hello,this is a directive!</em></div>" }; });遗憾的是显示的时候，GAMELoft9消失了，并没有显示出来。
hello,this is a directive!
为了让自定义指令包裹的内容不被覆盖，我们必须显式的指定transclude属性，并用ng-transclude指令指出在模板的哪里保存这些内容。如下所示：
var myApp = angular.module('app', []); myApp.directive("myLabel",function(){ return {//在这里定义指令 restrict:"E", transclude:true, template:"<div><em>hello <span ng-transclude></span>,this is a directive!</em></div>" }; });这样就OK了！
hello GAMELoft9,this is a directive!
此外还有replace属性，它指定是否用模板去替换我们的自定义指令，是否替换了可以通过按F12查看。