Directive 建立結構

angular.module('DirectiveTutorial', [])
    .directive('MyDirectiveName', function() {//主要識別起始 key
        //require:['^dA, ^dB], 此directive則對應到 ctrls
        //var linkFunc = function(scope, elem, attrs, ctrls) {
        //    ctrls[0] 表示為 dA, ctrls[1] 為 dB
        //}
        var linkFunc = function(scope, elem, attrs) {//主要處理程序
            var updateTime = function() {//內部函式
            };
            scope.toggle = function(index) {//供外部使用函式
            };
            scope.$watch('ratingValue', function(oldVal, newVal) {//監視屬性值變化
                if (newVal) { }
            });
            //scope.$on('$destroy', ...) 或 其它事件 mousedown,mousemove,mouseup
            element.on('$destroy', function() {//釋放
                $interval.cancel(timeoutId);
            });
            element.css({cursor: 'pointer'}); //CSS
            var timerEvent = function() { updateTime(); }
            timeoutId = $interval( timerEvent , 1000);//timer event
        }
        return {
            // 定義識別類型 A:attribute, E:element, C:class, M:註解 <!-- -->
            // 可組合如 'EA':element or attribute
            restrict: 'E',
            replace: false, // true:則會取代原來的元素, default=fasle:加入到原來的元素內
            //template, templateUrl 不會同時使用
            template: 'Name: {{customer.name}}
', //呈現的 內容(html 片段)
            //templateUrl:'tt.html',//使用外部 tempplate
            transclude: true, // 使directive可訪問外部的scope, 讓link的scope = 外部$scope
            //require: '^otherDirectivenName', //需要其他的 directive
            priority:0, // 當一個DOM元素包含多重directive，可設定此directive優先權。值愈大愈高，預設值是0
            terminal: false, //如果設為true，在有設priority的多重directive下，執行到此directive時就會中止
            compile: function(element, attrs, transclude) { //先於link，編譯template到DOM元素
                //return {
                //  pre: function preLink(scope, iElement, iAttrs, controller) { ... },
                //  post: function postLink(scope, iElement, iAttrs, controller) { ... }
                //} //return link function物件;
            },
            //要提供API給其他directive呼叫使用 controller, 否則使用 link 方式
            //controller: function($scope) {},
            link: linkFunc,
            //scope: true 或 {}
            scope: {// 增加屬性名稱 =, =attr, &, &attr,
                ratingValue: '=', //= 綁定ng-model的物件, 內外使用相同的屬性名稱, 值為 數值,布林,$scope.attr
                //ratingValue: '=rating', // 表示外部的屬性名稱為 rating, 運用此可將內外名稱分離
                readonly: '@', // 表示此屬性永遠是字串
                onRatingSelected: '&' //& 綁定 callback functions 或 運算式
            }
            /*true: 此directive會產生一個新的scope.注意: 多重directive的元素，只會有一個新scope.
                    此設定不適用有template的情況, template有自己的 isolate scope
              {}:   獨立於directive的 isolate scope 將會套用在此directive的template.
                    {}裡的property 可衍生 parent的scope變數到自己的scope:
                    @ 或 @attr &ndash; 綁定此DOM的屬性，得到的永遠是string。如 <tag my-attr="hello {{name}}">
                            此tag有scope: { localName:'@myAttr' }，則這裡localName的值會反映到 $scope.name
                    = 或 =attr :local scope與parent scope的屬性雙向綁定，改變會互相反映.
                            其值僅可為 數值, 布林, $scope.attr
                            如 <tag my-attr="scopeAttr">，此tag有scope: { localModel:'=myAttr' },
                            則localModel的值和 $scope.scopeAttr 會互相反映。
                    & 或 &attr :綁定計算式expression。如 <tag my-attr="c = c+1">,
                            此tag有scope: { localFn:'&myAttr' }，則這裡localFn會指向 c = c+1表達式
            */
        }
    });