其實我沒有那麼喜歡寫程式

自訂 AngularJs Directive (1) :開始

angular.png

最近一直在學習Angular,因為用慣了jQuery,所以在學Angular時就很好奇有沒有類似 jQuery plugin的功能?
其中最接近jQuery plugin的就是Directive了,它可以像jQuery plugin一樣重複利用,並且讓想要的Html元素賦予行為。

Angular提供了很多很有用的內建指令,通過Directive,能夠讓賦予HTML特殊的行為
舉個例子:
透過ng-repeat這個directive,我們能夠重複Render HTML元素(就像跑回圈一樣)

<ul>
    <li ng-repeat="item in items">{{item.Name}}</li>
</ul>

執行的HTML結果

<ul>
    <li>Lee</li>
    <li>Chen</li>
    <li>Lin</li>
</ul>

因為文章是假設各位已經有寫過Angular了,所以直接切入主題吧!
以下是自訂一個Directive的Pseudocode

var app = angular.module('myApp', []);

app.directive('directiveName', function(injectables){
    var directiveConfig = {
        restrict: string,
        priority: number,
        template: string,
        templateUrl: string,
        replace: bool,
        transclude: bool,
        scope: bool || plain object,
        require: string,
        controller: function controllerName($scope, $element, $attrs, $transclude) {....},
        link: function($scope, $element, $attrs) {....},
        compile: function(telement, tattrs, transclude){
            return function(scope, element, attrs) {...}
        }
    };
    
    return directiveConfig;
});

定義Directive的Option說明

屬性名稱 用途
restrict 說明該directive要以何種方式宣告,像是元素、屬性、註解
priority 說明該directive和其他在同個元素的directive的優先度為何,數字越小優先度越高
template 用字串的方式編寫HTML碼,使用該directive的元素將會替換為這裡指定的HTML
templateUrl 同template,但是是指定template的url
replace 若為true則會用template取代原本的Html元素,若為false則將元素insert到元本的Html裡面
transclude 設為true可以將原本的HTML的元素內容移到template定義的HTML元素裡
scope 若給一物件則會建立一個新的scope,若指定為true則繼成自父scope
controller 為directive定義一個controller(大部分的目的是為了和其他directive互動)
require 指定該directive需要和哪些directive互動
link 可以在該方法內增加監聽事件($scope.$watch),或初始化一些資訊
compile 在link執行之前會先被執行,用於用程式動態修改template

接下來將會詳細介紹這些選項的用途