在前兩篇文章中介紹了AngularJS三大特性：MVC框架、模塊化和依賴注入以及路由機制，今天小編介紹一下AngularJS的另一大特性：指令。
我們都知道，AngularJS通過指令對HTML達到了一個拓展的作用。指令分爲兩種，一種是 內置指令，爲應用添加功能；另一種是自定義指令，用戶可自己定義相關內容。
1、內置指令
內置指令是指帶有前綴ng-的一些指令，它拓展了HTML。現AngularJS內置指令有63個，如圖：
現列舉幾個內置指令的應用：
1）ng-app
初始化一個AngularJS應用程序，它定義根元素。它會自動初始化或啓動加載包含AngularJS應用程序的Web頁面的應用程序。它也被用來加載各種AngularJS模塊AngularJS應用。在下面的例子中，我們定義默認AngularJS應用使用div元素的ng-app 屬性。
<div ng-app="">
...
</div>2）ng-model
ng-model指令定義在AngularJS應用中使用的模型/變量。在下面的例子中，我們定義了一個名爲“myModel”的模型。
<div ng-app="">
...
<p>Enter your Name: <input type="text" ng-model="myModel"></p>
</div>3）ng-repeat
ng-repeat 指令重複html元素集合中的每個項目。在下面的例子中，我們已經迭代了數組countries。
<div ng-app="">
...
<p>List of Countries with locale:</p>
<ol>
<li ng-repeat="country in countries">
{{ 'Country: ' + country.name + ', Locale: ' + country.locale }}
</li>
</ol>
</div>2、自定義指令
自定義指令中使用AngularJS擴展HTML的功能。自定義指令使用的“指令”的功能定義。自定義指令只是替換了它被激活的元素。引導過程中AngularJS應用程序找到了匹配的元素，並做好使用自定義指令compile()方法一次活動再處理使用基於指令的範圍自定義指令link()方法的元素。 AngularJS提供支持，以下列元素的類型來創建自定義指令。
以一個簡單的Demo展示自定義指令的應用：
<html>
<head>
<title>Angular JS Custom Directives</title>
</head>
<body>
<h2>AngularJS Directive Test</h2>
<div ng-app="mainApp" ng-controller="StudentController">
<student name="yxm"></student><br/>
<student name="hcy"></student>
</div>
<!-- 引用Google CDN的ng庫 -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script>
/*定義一個名爲mainApp的module*/
var mainApp = angular.module("mainApp", []);
/*定義名爲student的指令*/
mainApp.directive('student', function() {
var directive = {};
directive.restrict = 'E'; //元素
directive.template = "Student: <b>{{student.name}}</b> , Roll No: <b>{{student.rollno}}</b>";
directive.scope = {
student : "=name"
}
/*compile函數對模板自身進行轉換*/
directive.compile = function(element, attributes) {
element.css("border", "1px solid #98FB98");
/* 每條指令運行link函數*/
var linkFunction = function($scope, element, attributes) {
element.html("Student: <b>"+$scope.student.name +"</b> , Roll No: <b>"+$scope.student.rollno+"</b><br/>");
element.css("background-color", "#00FF7F");
}
return linkFunction;
}
return directive;
});
/*定義控制器以更新範圍爲指令。在這裏，我們使用name屬性值作爲子的作用域。*/
mainApp.controller('StudentController', function($scope) {
$scope.yxm = {};
$scope.yxm.name = "yxm test";
$scope.yxm.rollno = 1;
$scope.hcy = {};
$scope.hcy.name = "hcy test";
$scope.hcy.rollno = 2;
});
</script>
</body>
</html>效果圖：
結語：
本篇文章只是簡單的介紹了一下指令的類型和簡單應用，在下篇文章中，再詳細描述一下指令的執行機制，敘述一下compile和link函數是如何工作的。希望大家繼續關注。
