AngularJS 讓我們可以繼承HTML帶有新的屬性，這個功能叫做指令Directives
AngularJS 有一組內置的指令，可以爲您的應用程序提供功能。
AngularJS 也讓我們自定義自己的指令
AngularJS指令是用前綴ng的擴展HTML屬性
通用的內置指令包括：
ng-app
ng-init
ng-bind
ng-controller
ng-model
ng-repeat
ng-click
ng-src
...
創建一個新的指令
新的指令用.directive function創建當給一個directive，你必須用駝峯法命名（my test directive - myTestDirective）
但是當執行這個指令的時候，你必須用 特殊的名字 my-test-directive。
執行一個指令我們可以配置restrict如下：
E:代表可以修飾元素名字
A:代表可以修飾熟悉
C:代表可以修飾類
M:代表註釋
默認是 EA
我們來看一下代碼js創建一個指令myTestDirective
var myApp = angular.module("myApp", []);
myApp.directive("myTestDirective", function() {
return {
restrict: "A", //default: EA
//replace: true, //false: 註釋是不可見的
template: "<h3>Hello Directive</h3>"
};
});由於restrict:A是屬性指令那麼我們可以在html中引入
<div class="test-div">
<p class="my-test-directive"></p>
</div>template: "<h3>Hello Directive</h3>"爲標籤中顯示的內容：如圖：
整體代碼如下：
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>Directive - AngularJS Test</title>
<style type="text/css">
.test-div {margin:15px;padding:15px;border:1px solid #ccc;}
</style>
</head>
<body>
<div class="test-div">
<ul ng-init="users=[{firstName:'Neo',lastName:'Huang'},{firstName:'Shelly',lastName:'Lee'}]">
<li ng-repeat="user in users">
<p ng-if="$even" style="color:red;">{{$index+1}} : {{user.firstName + " " + user.lastName}}</p>
<p ng-if="$odd" style="color:blue;">{{$index+1}} : {{user.firstName + " " + user.lastName}}</p>
</li>
</ul>
</div>
<div class="test-div">
<my-test-directive></my-test-directive>
</div>
<div class="test-div">
<p my-test-directive></p>
</div>
<div class="test-div">
<p class="my-test-directive"></p>
</div>
<div class="test-div">
<!-- directive: my-test-directive -->
</div>
<script type="text/javascript" src="static/js/angular-1.5.8.js"></script>
<script type="text/javascript">
var myApp = angular.module("myApp", []);
myApp.directive("myTestDirective", function() {
return {
restrict: "A", //default: EA
//replace: true, //false: 註釋是不可見的
template: "<h3>Hello Directive</h3>"
};
});
</script>
</body>
</html>