一、结构
angular.module
- controller / run
- filter / directive
自定义指令与自定义过滤器是非常类似的。
app.directive()：接收两个参数：
(1)自定义指令的名称;
(2)自定义指令的回调处理函数。与自定义filter类似。
二、配置选项
1. restrict：
指定当前指令的类型。有四种类型：
(1) ‘E’:标签
element的缩写，代表当前指令是标签指令
<pre><!DOCTYPE html><html ng-app="app"><head><meta charset="UTF-8"><title></title><script src="js/angular.min.js"></script><script>var app=angular.module('app',[]);app.directive('hello',function(){return{restrict:'E',template:"<div>Hello,angular!</div>"}});app.controller('Aaa',['$scope',function($scope){}])</script></head><body><hello></hello><div ng-controller="Aaa"></div></body></html></pre>
运行结果如下图所示：
(2)’A’：attribute:属性
指定当前指令为属性指令
<pre><!DOCTYPE html><html ng-app="app"><head><meta charset="UTF-8"><title></title><script src="js/angular.min.js"></script><script>var app=angular.module('app',[]);app.directive('hello',function(){return{/*restrict:'E',*/restrict:'A',template:"<div>Hello,angular!</div>"}});app.controller('Aaa',['$scope',function($scope){}])</script></head><body><!--此时这个标签指令就不能被解析--><hello></hello><p hello></p><div ng-controller="Aaa"></div></body></html></pre>
运行结果如下图所示：
注意：指令类型是可以组合使用的。若想实现上述代码中的指令标签和属性标签都能被解析，可以将restrict配置选项设置为：”restrict:’AE’”。
restrict的值必须是大写的，小写是不会起作用的。
(3)’C’：class指令
restrict:'E'，<p class="hello"></p>修改上述代码。运行结果如下图所示：
(4)’M’：注释
<pre><!DOCTYPE html><html ng-app="app"><head><meta charset="UTF-8"><title></title><script src="js/angular.min.js"></script><script>var app=angular.module('app',[]);app.directive('hello',function(){return{restrict:'AEM',//replace的值必须设置为true,否则注释写法无效 replace:true,template:"<div>Hello,angular!</div>"}});app.controller('Aaa',['$scope',function($scope){}])</script></head><body><!--最后一个字符必须要有一个空格，否则不起作用--><!-- directive:hello --><div ng-controller="Aaa"></div></body></html></pre>
指令的模版内容会代替注释内容,运行结果如下：
总结：
a.后两种指令类型用的比较少，class指令容易与标签的class属性混淆，注释指令也容易混淆；前两种用的比较多，标签指令和属性指令。
b.标签指令一般用来重写标签，用模版内容代替标签；属性标指令一般用来做成功能性的指令，类似ng-show
c.若指令名称是多个单词，语法规则是：
app.directive('myHello',function(){...}，此处是驼峰；html里写法是：<my-hello></my-hello>。注意：“ng-”开头的指令是angularJS内置的指令，我们自定义的指令命名应该尽可能避开。
2. template:模版
用于为自定义指令添加模版。
3. replace
因为默认会将模版内容解析到所在标签内部。如果将这个值设为true,就会用模版替换所在指令的所在标签。运行结果如下图所示：
4.templateUrl：模板路径
当模板的内容比较多的情况下，会有一个问题，就是写起很不方便，可以采用templateUrl的方式来解决，它可以指定外部模板的页面路径。
angular-directive.html:
<pre><!DOCTYPE html><html lang="en" ng-app="myApp"><head><meta charset="UTF-8"><title>Title</title><style>#div1 div{width: 200px;height:200px;border: 1px solid red;display: none;}#div1 input.active{background-color: red;}</style><script src="js/angular.min.js"></script><script type="text/javascript">var m1= angular.module("myApp",[]);m1.directive("myTab",function(){return{restrict:"E",replace:true,//字符串不能直接断行，不过有很多方法可以解决。例如下面这种：使用“\”斜杠符号进行字符串累加/* template:'<div id="div1">\<input type="button" value="1" class="active"/>\<input type="button" value="2"/>\<input type="button" value="3"/>\<div style="display: block">11111</div>\<div>22222</div>\<div>33333</div>\</div>'*/templateUrl:'temp1.html'};});</script></head><body><my-tab></my-tab></body></html></pre>
temp1.html:
<pre><div id="div1"><input type="button" value="1" class="active"/><input type="button" value="2"/><input type="button" value="3"/><div style="display: block">11111</div><div>22222</div><div>33333</div></div></pre>
结论：运行效果与将模板直接写在template选项中一样。
