AngularJS的directive（指令）的配置選項說明

js代碼如下：

var appModule = angular.module("appModule", []);
appModule.controller("Ctrl", ["$scope", "$timeout", function($scope, $timeout) {
$scope.naomi = { name: "Naomi", address: "1600 Amphitheatre" };
$scope.igor = { name: "Igor", address: "123 Somewhere" };
$scope.vojta = { name: "Vojta", address: "3456 Somewhere Else" };
$scope.format = "M/d/yy h:mm:ss a";
$scope.name = "Tobias";
$scope.hideDialog = function () {
$scope.dialogIsHidden = true;
$timeout(function () {
$scope.dialogIsHidden = false;
        }, 2000);
    };
}]);
appModule.directive('myTabs', function() {
return {
        restrict: 'E',
        transclude: true,
        scope: {},
controller: function($scope) {
var panes = $scope.panes = [];

$scope.select = function(pane) {
                angular.forEach(panes, function(pane) {
pane.selected = false;
                });
pane.selected = true;
            };

this.addPane = function(pane) {
if (panes.length == 0) {
$scope.select(pane);
                }
                panes.push(pane);
            };
        },
        templateUrl: 'my-tabs.html'
    };
});
appModule.directive('myPane', function() {
return {
        require: '^myTabs',
        restrict: 'E',
        transclude: true,
        scope: {
            title: '@'
        },
link: function(scope, element, attrs, tabsCtrl) {
tabsCtrl.addPane(scope);
        },
        templateUrl: 'my-pane.html'
    };
});
appModule.directive("myDraggable", ["$document", function($document) {
return function(scope, elem, attrs) {
var startX = 0, startY = 0, x = 0, y = 0;
elem.css({
            position: "relative",
            border: "1px solid red",
            backgroundColor: "lightgrey",
            cursor: "pointer"
        });
elem.on("mousedown", function(event) {
// 組織所選對象的默認拖曳操作
            event.preventDefault();
            startX = event.pageX - x;
            startY = event.pageY - y;
$document.on("mousemove", mousemove);
$document.on("mouseup", mouseup);
        });
function mousemove(event) {
            y = event.pageY - startY;
            x = event.pageX - startX;
elem.css({
                top: y + "px",
                left:  x + "px"
            });
        }
function mouseup() {
$document.off("mousemove", mousemove);
$document.off("mouseup", mouseup);
        }
    }
}]);
appModule.directive("myDialog", function() {
return {
        restrict: "E",
        transclude: true,
        scope: {
"close": "&onClose"
        },
        templateUrl: "my-dialog.html",
link: function (scope, ele, attrs) {
scope.name = "Jeff";
        }
    };
});
appModule.directive("myCustomer", [function() {
return {
        restrict: "E",
        scope: {
            customerInfo: "=info"
        },
        transclude: true,
        template: "",
        templateUrl: "tpls.html",
link: function(scope, element, attrs) {

        }
    };
}]);
appModule.directive("myCurrentTime", ["$timeout", "dateFilter", function($timeout, dateFilter) {
return {
link: function (scope, element, attrs) {
var format, timeoutId;
function updateTime() {
//使用內置dateFilter服務
                element.text(dateFilter(new Date(), format));
//使用內置$filter服務
                //element.text($filter("date")(new Date(), format));
            }
scope.$watch(attrs.myCurrentTime, function(value) {
                format = value;
updateTime();
            });
function scheduleUpdate() {
                timeoutId = $timeout(function() {
updateTime();
scheduleUpdate();
                }, 1000);
            }
element.on("$destroy", function() {
$timeout.cancel(timeoutId);
            });
scheduleUpdate();
        }
    }
}]);

創建指令

     最佳實踐： 儘量返回一個對象，而不要只返回一個函數。爲了防止與未來的標準衝突，最好是前綴化你自己的指令名字。

require

    當指令使用這個選項，$compile服務會查找一個名叫myTabs的控制器，如果沒有找到，就會拋出一個錯誤。該選項的值可以分別用前綴?、^和?^進行修飾，也可以不修飾。使用^前綴意味着指令將會在它的父元素上面搜索控制器，使用?前綴就意味着如果在當前指令沒有找到控制器，就將null作爲link的第四個參數，如果將?和^結合起來，我們就可以既指定上游指令，又可以在找不到時，不拋出嚴重的錯誤。沒有前綴修飾，指令默認只在所屬元素上搜索指定的控制器。

restrict

    該選項指定創建指令的方式，創建方式有E（元素），A（屬性），C（類名），M（註釋）,因此可以取值"E"，"EA"，"EAC"，"EACM"等等。最佳實踐：最好通過標籤名和屬性來使用指令而不要通過註釋和類名。這樣做可以更容易地看出一個元素是跟哪個指令匹配的。通常註釋式命名式指令使用在如下情景：某些指令需要跨越多個元素，但是受DOM API的限制，無法跨越多個元素(比如<table>元素)。 AngularJS 1.2 引入了ng-repeat-start和ng-repeat-end指令，作爲更好的解決方案。 建議開發者使用這種方式，而不要用“自定義註釋”形式的指令。什麼情況下該用元素名，什麼情況下該用屬性名？ 當創建一個含有自己模板的組件的時候，建議使用元素名，常見情況是，當你想爲你的模板創建一個DSL（特定領域語言）的時候。如果僅僅想爲已有的元素添加功能，建議使用屬性名。

scope

          該選項給指令創建獨立作用域。如果指令沒有創建獨立作用域，那麼指令在給定的作用域內僅能使用一次，要重用該指令就必須爲它新創建一個控制器。最佳實踐：如果要使你的組件在應用範圍內可重用，那麼使用scope選項去創建一個獨立作用域。如上代碼所示，customerInfo對應爲指令獨立作用域裏的customerInfo屬性，值（'=info'）告訴$compile這裏綁定了所在元素的info屬性，而info屬性就可綁定父作用域的屬性，即可達到指令內部作用域與父作用域通信的目的。注意: 指令作用域選項中的'=attr'屬性名是被規範化過後的名字. 比如要綁定<div bind-to-this="thing">,你就要使用'=bindToThis'的綁定。scope的綁定策略：=代表與父作用域中的屬性雙向綁定，@代表把當前屬性作爲字符串傳遞，也可綁定父作用域的值，&代表傳遞一個來自父作用域的函數，稍後調用。

template && templateUrl

          指令使用的模版。最佳實踐：除非你的模板非常小，否則最好分割成單獨的hmtl文件，然後使用templateUrl選項來加載。

link

         指令修改DOM通常是在link選項中，link選項接受一個帶有如下簽名的函數function link(scope,element,attrs,ctrls) {...} 其中： scope是一個Angular的scope對象.，element 指令匹配的jqLite封裝的元素(angular內部實現的類jquery的庫) ，attrs 是一個帶有規範化後屬性名字和相應值的對象，ctrls是指令依賴的所有控制器集合。被angular編譯過的DOM元素被移除的時候， 它會觸發一個$destroy 事件。最佳實踐： 指令應該自己管理自身分配的內存。當指令被移除時， 你可以使用element.on('$destroy', ...) 或scope.$on('$destroy', ...)來執行一個清理的工作。

transclude    

          該選項使得指令所包裹的內容能夠訪問指令外部的作用域。最佳實踐: 僅當你要創建一個包裹任意內容的指令的時候使用transclude: true。

controller

    該選項可爲指令定義一個控制器，然後其它指令通過require去查找這個控制器，並將該控制器的示例作爲link函數第四個參數進行調用。最佳實踐: 當你想暴露一個API給其它的指令調用那就用controller,否則用link。