一、結構
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選項中一樣。
5.自定義指令的配置項部分未完待續。。
