angular學習筆記(三十)-指令(1)-概述

詩&遠方發表於2014-08-21
原文網址 : https://www.cnblogs.com/liulangmao/p/3927267.html
Angular筆記

之前在 angular學習筆記(十九)-指令修改dom 裡面已經簡單的提到了angular中的指令,現在來詳細的介紹 '指令' 

一.指令的建立:

dirAppModule.directive('directive-name',function(){
    var obj = {
        restrict:'string',
        priority:number,
        template:'string',
        templateUrl:'string',
        replace:bool,
        transclude:bool or 'element',
        scope:bool or string,
        controller:function(){},
        require:'string',
        link: function(scope,element,attrs,ctrl,transclude){},
        compile: function(element,attrs,transclude){
            return {
                pre: function(scope,element,attrs,controller){},
                post: function(scope,element,attrs,controller){}
            }
        }
    };
    return obj
});

通過 app.directive('directive-name',function(){})來建立一個服務. directive()方法傳入兩個引數.

第一個引數:是一個字串,也就是指令的名字.一般的命名規則是用'-'來分割,'-'前是名稱空間,'-'後是給這個指令取的名字.其實我們之前用到的比如'ng-repeat','ng-model','ng-view'...等,這些都是angular自帶的指令.他們的實質也就是指令.所以,自己建立的指令不應該使用ng作為名稱空間.

第二個引數:是一個函式,該函式返回一個json物件.該物件一共可以有上面列出來的11個屬性.在後面的文章中一一講解這些屬性.

相關文章