在前端開發中, 我們會遇到很多地方都會用到同一種類型的控件。AngularJS提供了自定義指令功能，我們可以在指令里面定義特定的html模板。提供給前台html調用.
一. 指令的簡單定義.
下面定義了一個簡單的控件，點擊后調轉到博客園。
Note: 1.命名方式:directive必須以小寫字母開頭，其中如果后面由大寫字母，html調用的時候就要用 - 將單詞分開.
<html> <script src='angular.js'></script> <script type="text/javascript"> angular.module('myapp',[]) .directive('myCnblogs',function(){ return { restrict: 'E',
replace: false, template:'<a href="http://www.cnblogs.com/">Go to cnblogs</a>' } }) </script> <head> <title></title> <div ng-app='myapp'> <my-Cnblogs></my-Cnblogs> </div> </head> <body> </body> </html>
二.指令元素介紹:
2.1 restrict
常用的restrict有E,A,C三種設置。這些設置可以混用,比如EA,AC。不需要符號隔開
E(Element)：元素,使用格式是<my-directive></my-directive>
A(Propertity): 屬性，使用格式:<div my-directive></div>
C(Class): 類, 使用格式:<div class='my-directive'></div>
2.2 repleace
下面是Replace分別設置false和True的效果
2.3 termplate:
template 是設置對應的html模板, 如果有html換行那就要在每一句末尾加上 / 符號. 如果html代碼較多，可以通過設置templateurl: urlpath，來加載對應當的代碼模板
三. 向指令內部添加數據
3.1 下面通過設置scope簡單的實現了數據的綁定.
<!DOCTYPE html> <html> <script src='angular.js'></script> <script type="text/javascript"> angular.module('myapp',[]) .directive('myDirective', function() { return { restrict: 'A', replace: true, scope:{ myurl:"@", mycontent:"@" }, template: '<a href="{{myurl}}">{{mycontent}}</a>' }; }); </script> <head> <title></title> <div ng-app='myapp'> <div my-Directive myurl='http://www.cnblogs.com/' mycontent='go to blogs'></div> </div> </head> <body> </body> </html>
3.2 深入理解自定義控件scope的綁定
自定義控件綁定$scope分為 @，=，& 三種情況。個人認為@:單向綁定，=：雙向綁定，&: 用於綁定函數，下面看看Angularjs權威指南的介紹
@ 本地作用域屬性：使用@符號將本地作用域同DOM屬性的值進行綁定。
= 雙向綁定：通過=可以將本地作用域上的屬性同父級作用域上的屬性進行雙向的數據綁定。 就像普通的數據綁定一樣，本地屬性會反映出父數據模型中所發生的改變
& 父級作用域綁定 通過&符號可以對父級作用域進行綁定，以便在其中運行函數。意味着對這個值進行設置時會生成一個指向父級作用域的包裝函數.
下面的demo實現了對三種情況的綁定.
<!DOCTYPE html> <html> <script src='angular.js'></script> <script type="text/javascript"> angular.module("myApp", []) .directive("myDir", function() { return { restrict: "A", scope: { name: "@", desc: "=", show: "&" }, template: "<div>" + " <input type='text' ng-model='name' />: <input ng-model='desc' />" + " <button ng-click='show()'>show</button>" + "</div>", replace: true, link: function (scope, element, attrs) { console.log("initial value for name:" + scope.name); console.log("initial value for description:" + scope.amount); scope.$watch("desc", function (newVal, oldVal) { console.log("desc has changed " + oldVal + " >> " + newVal); }); scope.$watch("name", function (newVal, oldVal) { console.log("name has changed " + oldVal + " >> " + newVal); }); } } }) .controller("myCtrl", function($scope) { $scope.customerName = "Frank"; $scope.content = 'Learning Angular'; $scope.show = function(source) { alert(source); }; }) </script> <head> <meta charset="utf-8" /> <title></title> </head> <body ng-app="myApp" ng-controller="myCtrl"> <h3>普通的Angular</h3> <input type="text" ng-model='customerName'>: <input ng-model="content" /> <button ng-click="show('普通函數')">show</button> <h3>自定義指令</h3> <div my-dir name="{{customerName}}" desc="content" show="show('自定義指令綁定函數')"> </div> </body> </html>
下面是效果圖:
四. 總結:
本篇章介紹了自定義指令的簡單實用. 可以通過自定義指令封裝很多特定功能的html模板，供頁面調用。 大家可以試一試將上面demo的 & 修改為 @或者=，經測試修改為@符號，自定義指令的show方法 是無法執行的。如果修改為=號就很有意思了。點擊上面的btn，會執行兩次show方法。 然后修改任何一個input，下面的show方法都會被執行。如果有博友知道是什么原因也請在線回復一下。這個原理實在 不清楚是什么原因。