ng自定義指令

自定義指令( 瞭解 )

如果使用:
    1> 作為 屬性使用 <div ng-app></div>
    2> 作為 class 使用 <div class="ng-cloak"></div>
    3> 作為標籤 a
    4> 作為註釋使用: <!-- directive: 指令名 -->

自定義指令語法:
    module.directive( '指令名(駝峰命名規則)', [ '...', function ( ... ) {
        return function | object;
    }] );

    1> 物件
        template: '...'
        templateUrl: '檔案的路徑'
        restrict: 'ECMA'
                   其中 E 表示 element 元素, 指指令可以當做元素來使用( 標籤語法 )
                   其中 C 表示 class 類, 指指令可以作為 class 的屬性值來使用
                   其中 M 表示 comment 註釋, 指指令以註釋的形式使用
                   其中 A 表示 attribute 屬性, 表示可以使用屬性的形式使用( 預設 )
        replace: boolean 表示是否替換容器標籤
        transclude: Boolean 
                    置換, 該屬性的作用是將指令容器中的內容 傳遞到指定的位置
                    <div ng-repeat="...">
                        ...
                    </div>
        scope: boolean | object
                預設值 false
                設定為 true 就建立一個 繼承自 其容器作用域的 作用域物件
                如果賦值給 scope 一個 物件 { }, 稱為 獨立作用域( 隔離作用域 ), 不繼承任何 scope
                如果需要給 模板中 的內容進行插值, 需要在 指令 容器中提供資料的話, 那可可以使用指繫結

        controller: 字串 | 函式
        link: function(scope, iElement, iAttrs) { ... }   
                link 屬性幾乎可以說是在 ng 中唯一一個 推薦使用 dom 操作的地方
                在執行指令的時候, ng 會呼叫 link 方法, link 帶有幾個引數.
                分別是 當前作用域 scope, 當前元素的 jqlite 物件, 以及該元素的所有屬性

    2> 函式
        等價於 link 函式
        module.directive( '...', function () {
            return function () { ... };
        } )
        等價
        module.directive( '...', function () {
            return {
                link: function () { ... }
            }
        } )