AngualrJS之自定義指令
阿新 • • 發佈:2019-04-28
for 擴展 angularjs 控制 範圍 restrict 多個 eat pil
一、指令
指令directive是AngularJS的核心之一 包括 - 用於擴展HTML元素、屬性的指令 - 執行特定功能的指令 - 自定義指令 內置指令基本上都是以ng-開頭
二、內置指令
1、屬性指令
ng-href:代替a標記的href屬性
ng-src:代替img等標記的src屬性
ng-disabled:設置表單元素是否可用
ng-checked:設置選項是否選中
ng-readonly:設置文本元素是否只讀
ng-selected:設置下拉選項是否選中
ng-class:設置class屬性
ng-style:設置style屬性,應該是對象或JSON
2、功能指令
ng-app:設置當前元素是 AngularJS根元素 ng-controller:用於為應用添加控制器 ng-include:用於包含外部的HTML文件 ng-if:用於在表達式為false時移除HTML元素 ng-switch:根據表達式顯示或隱藏對應的部分 ng-repeat:用於循環輸出指定次數的HTML元素 ng-init:執行給定的表達式 ng-bind:使用給定的變量或表達式的值來替換HTML元素的內容 ng-bind-template:與上類似,可綁定多個 ng-cloak:用於在應用加載時防止代碼未加載完而出現AngularJs表達式的問題 ng-model:用於綁定表單元素到作用域變量中(雙向綁定) ng-hide/ng-show:在表達式為true時隱藏/顯示HTML元素 ng-form:增強HTML表單 ng-change:類似於onchange事件 ng-click:類似於onclick-事件 ng-submit:類似於onsubmit事件
三、自定義指令
1、概述
使用directivej方法可以自定義指令,語法:模塊對象.directive(“指令名”,[註入內容,回調函數]); 指令名采用駱駝命名法,使用時將駝峰名稱改寫為短橫線連接的名稱,如定義時為: itFirst,則使用時為it-first;第一個詞不建議使用ng 回調函數返回一個JSON對象,該對象包括了自定義指令的配置,即指令對象定義 指令對象定義是一個JSON格式,包含大量指令配置項
2、指令的生命周期
加載階段:以ng-app為入口,確定 EAngularJSt的應用範圍 編譯階段:遍歷應用範圍,找到所有指令,根據指令的定義進行DOM轉換(由template、templateUrl、replace等配置項決定),如果指令有compile函數則調用鏈接階段:應用範圍內的每條指令運行link函數,如果有DOM操作,也應該在link函數中執行
3、指令配置項
restrict:字符串,指令以何種形式使用,‘A’ 表示屬性Attribute , ‘E’ 表示元素Element 、 ‘C’ 表示類Class 、‘M’ 表示註釋Comment( 需加directive:),也可以是它們的組合形式。默認值為AE ,可以通過元素名和屬性名來調用指令。 template:一段HTML 文本或返回一個HTML 文本的函數,用來填充指令內容,當replace為true時結果必須有且僅有一個根元素 。如果頁面中多個指令的模板基本相同,可以使用$templateCache 進行緩存後再使用 replace:布爾,是否替換原有元素,默認false templateUrl:指定外部模板文件的路徑,或返回路徑的函數,用於代替template transclude:是否包含原有內容,設置為true 時,可在template中使用ng-transclude指令獲取原有內容,即需要 配合ng-transclude 指令使用 priority :指定同一元素上多個指令的controller調用的優先級,數值類型,值越大優先級越高,默認為0 terminal :同一元素上優先級比本指令低的指令或低層次的指令是否執行,布爾類型 scope:表示指令的作用域,取值有三種(false 、true 、{} 空對象),false 表示繼承父作用域,同一個作用域;默認值true表示從父作用域繼承並創建一個新作用域;{} 空對象表示隔離作用域,默認無法訪問父作用域,但可以通過配置綁定( 隔離) 策略,
將父作用域中指定數據綁定到隔離作用域中,綁定策略有三種形式:@:單向,父作用域影響隔離作用域,將屬性作為字符串傳遞;=:雙向, 父作用域與隔離作用域相互影響,將屬性按原類型傳遞;&:方法的訪問形式,註意傳參數的寫法,
必須以對象形式傳遞可以在以上符號的後面指定綁定的名稱( 屬性名),也可省略簡寫
AngualrJS之自定義指令