在第一篇 認識AngularJS 中，我們已經基本了解了AngularJS，對Directive也有了一定了解，本章我們將繼續介紹Directive，對其有一個更深入的了解和掌握。
常用的Directives
除了第一篇中已提到過的： ng-app, ng-controller, ng-show（與之對應的當然還有ng-hide）這幾個內建的Directive之外，我們還將了解另外幾個非常常用的Directive。
1. ng-repeat （根據集合重復創建指定的模板）:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <script src="/Scripts/angular.js"></script> 5 <script type="text/javascript"> 6 (function () { 7 var app = angular.module('student', []); 8 9 // 這次定義一個數組students，里面有三個學生Jack、Mary、Tom 10 var students = [{ 11 name: "Jack", 12 age: 18, 13 sex: 'male', 14 displayComment: false 15 }, 16 { 17 name: "Mary", 18 age: 16, 19 sex: 'female', 20 displayComment: true 21 }, 22 { 23 name: "Tom", 24 age: 17, 25 sex: 'male', 26 displayComment: true 27 }]; 28 29 app.controller('myController', function () { 30 this.students = students; 31 }); 32 })(); 33 </script> 34 </head> 35 <body ng-app="student"> 36 <div ng-controller="myController as myCtrl"> 37 <!--使用ng-repeat，優雅的迭代顯示所有學生信息--> 38 <div ng-repeat="stu in myCtrl.students"> 39 <p>Student{{myCtrl.students.indexOf(stu) + 1}}:</p> 40 <p>Name:{{stu.name}}</p> 41 <p>Age:{{stu.age}} will be {{stu.age+15}} after 15 years.</p> 42 <p>Sex:{{stu.sex}}</p> 43 <p ng-show="stu.displayComment">Comments:This will not display on page.</p> 44 <br /> 45 </div> 46 </div> 47 </body> 48 </html>
2. ng-model（ng-model定義一個變量，該變量在Scope范圍內可被直接使用，關於Scope今后有機會可能需要單獨寫一章）:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <script src="/Scripts/angular.js"></script> 5 </head> 6 <body ng-app> 7 <input ng-model="yourname" /> 8 <br /> 9 Your name is: {{yourname}} 10 </body> 11 </html>
3. ng-src & ng-href:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <script src="/Scripts/angular.js"></script> 5 <script type="text/ecmascript"> 6 (function () { 7 // 注意，這個demo中我們使用連綴的形式書寫代碼，這個和以前不一樣 8 // 個人認為連綴的形式沒有單獨書寫清晰 9 angular.module('src.href.test', []) 10 .controller('myController', function () { 11 this.imgName = "112348515178380.png"; 12 }); 13 })(); 14 </script> 15 </head> 16 <body ng-app="src.href.test"> 17 <div ng-controller="myController as myCtrl"> 18 <a href="https://images0.cnblogs.com/blog2015/455688/201505/112348515178380.png">A link</a> 19 <br /> 20 <img src="https://images0.cnblogs.com/blog2015/455688/201505/112348515178380.png" /> 21 <br /> 22 myCtrl.imgName : {{myCtrl.imgName}} 23 <br /> 24 <a href="https://images0.cnblogs.com/blog2015/455688/201505/{{myCtrl.imgName}}">A link</a> 25 <br /> 26 <img src="https://images0.cnblogs.com/blog2015/455688/201505/{{myCtrl.imgName}}" /> 27 </div> 28 </body> 29 </html>
特別注意：按照官方的說法，直接使用src或者href屬性時，由於渲染頁面時，AngularJS還沒開始解析src或者href中的Expression，因此將會得到一個404錯誤（因為地址直接被解析成了https://images0.cnblogs.com/blog2015/455688/201505/{{myCtrl.imgName}} ）。實際上，若運行以上的代碼，我們會驚喜的發現，並沒有看到圖片404錯誤。真的是這樣嗎？如果你用開發者工具看一下加載項，就能知道發生了什么。確實如官方文檔所說，實際發生了一次404錯誤，但是AngularJS解析了Expression之后，圖片又被加載了一次，因此從表面上我們並未察覺錯誤。所以結論是，最好使用ng-src/ng-href避免該問題的發生。
4. 事件類Directives，以ng-click為例（類似的還有ng-blur,ng-change,ng-checked,ng-dblclick,ng-keydown, ng-keypress, ng-keyup, ng-mousedown, ng-mouseenter, ng-mouseleave, ng-mouseup):
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <script src="/Scripts/angular.js"></script> 5 <script type="text/javascript"> 6 (function () { 7 var app = angular.module('clicktest', []); 8 9 app.controller('myController', ['$scope', function ($scope) { 10 this.sayHello = function () { 11 alert("Hello, " + $scope.yourname); 12 }; 13 }]); 14 15 // 以下代碼與上面的功能一樣，但是推薦上面這種寫法，今后講AngularJS的服務的時候將會講到。 16 // 主要原因是js可以被壓縮、加密等操作，$scope 將被變換從而AngularJS無法識別它， 但字符串 '$scope' 是不會被變換的 17 //app.controller('myController', function ($scope) { 18 // this.sayHello = function () { 19 // alert("Hello, " + $scope.yourname); 20 // }; 21 //}); 22 })(); 23 </script> 24 </head> 25 <body ng-app="clicktest"> 26 <div ng-controller="myController as myCtrl"> 27 <input ng-model="yourname" /> 28 <br /> 29 <button ng-click="myCtrl.sayHello()">Say Hello</button> 30 </div> 31 </body> 32 </html>
特別注意下被注釋的那部分代碼和注釋部分的說明。
5. ng-class, ng-class-even, ng-class-odd:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style type="text/css"> 5 .odd { 6 color: red; 7 } 8 9 .even { 10 color: blue; 11 } 12 13 .green_bold { 14 color: green; 15 font-weight: bold; 16 } 17 </style> 18 19 <script src="/Scripts/angular.js"></script> 20 <script type="text/javascript"> 21 (function () { 22 var app = angular.module('student', []); 23 24 var students = [{ 25 name: "Jack", 26 age: 18, 27 sex: 'male', 28 displayComment: false 29 }, 30 { 31 name: "Mary", 32 age: 16, 33 sex: 'female', 34 displayComment: true 35 }, 36 { 37 name: "Tom", 38 age: 17, 39 sex: 'male', 40 displayComment: true 41 }]; 42 43 app.controller('myController', function () { 44 this.students = students; 45 }); 46 })(); 47 </script> 48 </head> 49 <body ng-app="student"> 50 <div ng-init="myVar='green_bold'"> 51 <p ng-class="myVar">This should be green.</p> 52 </div> 53 <div ng-controller="myController as myCtrl"> 54 <!--這里添加了 ng-class-odd 和ng-class-even 屬性--> 55 <div ng-repeat="stu in myCtrl.students" ng-class-odd="'odd'" ng-class-even="'even'"> 56 <p>Student{{myCtrl.students.indexOf(stu) + 1}}:</p> 57 <p>Name:{{stu.name}}</p> 58 <p>Age:{{stu.age}} will be {{stu.age+15}} after 15 years.</p> 59 <p>Sex:{{stu.sex}}</p> 60 <p ng-show="stu.displayComment">Comments:This will not display on page.</p> 61 <br /> 62 </div> 63 </div> 64 </body> 65 </html>
6. ng-submit（偷懶直接引用了官方的demo）：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <script src="/Scripts/angular.js"></script> 5 <script type="text/javascript"> 6 (function () { 7 var app = angular.module('submitExample', []); 8 9 app.controller('ExampleController', ['$scope', function ($scope) { 10 $scope.list = []; 11 $scope.text = 'hello'; 12 $scope.submit = function () { 13 if ($scope.text) { 14 $scope.list.push(this.text); 15 $scope.text = ''; 16 } 17 }; 18 }]); 19 })(); 20 </script> 21 </head> 22 <body ng-app="submitExample"> 23 <form ng-submit="submit()" ng-controller="ExampleController"> 24 Enter text and hit enter: 25 <input type="text" ng-model="text" name="text" /> 26 <input type="submit" id="submit" value="Submit" /> 27 <pre>list={{list}}</pre> 28 </form> 29 </body> 30 </html>
特別注意的是：ng-submit將默認阻止Submit的默認提交動作。
7. ng-include （將Html片段加載到指定位置）:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <script src="/Scripts/angular.js"></script> 5 <script type="text/javascript"> 6 (function () { 7 var app = angular.module('ngIncludeTest', []); 8 app.controller('myController', ['$scope', function ($scope) { 9 $scope.info = { 10 yourname: 'Jack', 11 template: 'template.html' 12 }; 13 }]); 14 })(); 15 </script> 16 </head> 17 <body ng-app="ngIncludeTest"> 18 <div ng-controller="myController as myCtrl"> 19 <div ng-include="info.template"></div> 20 </div> 21 </body> 22 </html>
template.html的代碼：
1 <div> 2 <p>This is a template.</p> 3 <p>Your name: {{info.yourname}}</p> 4 </div>
好了，講了這么多常用的Directives，對Directive應該有了更進一步的了解，AngularJS內建了好幾十個Directives，基本能滿足你所有的需求了，但是如果你提出這么多Directives還是無法滿足你的要求，那怎么辦呢？
放心，AngularJS框架幫你設計了自定義Directive的方法，不過這篇篇幅已經略大，關於Directive的自定義，還是放到后面一篇去吧，免得大家看得太累了。
由於AngularJS的特性之一就是寫出更具語義化的前端代碼，最后一個ng-include例子在后面一章也會直接使用自定義的Directive改造一下，不使用div這種不具語義的標簽，而使用自定義的語義化標簽。
好了，今天就這樣吧。
參考資料
CodeSchool快速入門視頻（英文版）：http://campus.codeschool.com/courses/shaping-up-with-angular-js/intro
AngularJS官方文檔：https://docs.angularjs.org