Angularjs中的自定義指令

2021-07-31 15:46:27 字數 2691 閱讀 3705

1. angularjs的基本指令

**格式如下:

2.自定義指令的place選項,用於指定是否使用模板頁面來替換自定義指令,預設值為false

當為true時,可以被替代,為false時不被替代

具體使用**如下:

3.自定義指令的restrict選項:用來指定自定以指令在頁面中出現的方式

預設情況下,自定義指令,可以被當成標籤或者標籤的屬性進行使用,通常,自定義指令可以被配置當成*標籤*標籤屬性*標籤的class*注釋,四種方式使用,可以通過restrict選項進行配置,取值:e/c/m/a

d.在注釋中使用指令 m:mark,使用的時候需要注意;必須設定replace為true

注釋的方式極大的降低了**的可讀性和維護性,不推薦使用.

4.  自定義指令的transclude選項 , 用於在使用自定義標籤時,指定是否使用標籤中包含的內容

預設情況下,transclude選項為false,表示自定義指令直接當成空標籤來使用, 如果指定transclude選項為true,表示可以使用標籤中包含的內容,但是要配合ng-transclude指令一起使用

使用**如下:

5.自定義指令的controller選項:用於給自定義指令新增乙個區域性控制器

**如下:

6.自定義指令的compile選項:用於控制指令執行的過程

執行**如下:

7.自定義指令的scope選項:用於控制自定義指令/元件的作用域

8.自定義指令的 scope選項是用來設定作用域的,不是定義變數或者函式的

1.scope選項中的&符號,主要用於將父級作用域中的資料封裝成函式進行訪問,實現不同作用域之間的資料隔離*/

2. scope選項中的=符號,主要用於將父級作用域中的資料 和當前作用域中的變數進行了雙向繫結

3. scope選項中的@符號,主要用來通過屬性獲取父級作用域中的資料,賦值給當前作用域中的變數fnz,此時父->子是資料單向繫結的子作用域中只能通過變數fnz讀取父作用域中的資料

具體**如下:

總結:

自定義指令和元件的區別:

自定義指令和元件基本沒有什麼區別,都是用於將頁面中出現的重複的ui和資料的處理,封裝起來,提高**的復用性。同時在專案開發過程中,積累大量的封裝好的自定義指令或元件,在後續的專案開發時直接使用,提高開發效率。

什麼時候用自定義指令?什麼時候用元件?

a.在老版本中的專案中,自定義指令使用較多,angular1.4以前的版本中,元件的概念比較模糊,所以將頁面中出現的大量重複的ui和資料處理,封裝自定義指令來提高復用性

b. 新版本專案中,自定義元件使用較多,在angular1.5以後,官方也開始重視元件化開發,所以將自定義指令進行了重新定義,並建立了component組建的部分,在1.5以後的專案開發中,官方推薦使用component元件來封裝重複的ui和資料指令,極大程度上替代了使用比較複雜的自定義指令

通常,頁面中出現的重複ui和資料處理比較複雜的情況下,使用自定義元件,如果只是簡單的重複ui或者說附帶了簡單資料處理,可以使用自定義指令

angularjs自定義標籤

具有功能 1 支援按多列進行模糊查詢。2 資料模板可以指定輸出元素。查詢輸入框 標籤封裝 form表單中input型別為text的標籤 並且需要彈窗查詢資料 封裝 專案封裝標籤 input table 屬性 table resultjson jsonresulta 後端返回的資料物件 json陣列 ...

angularJs自定義指令

e 元素 a 屬性,預設值 c 類名 m 注釋 directive my directive expression priority 優先順序 用來表示指令使用的優先順序 如果乙個元素上具有兩個優先順序相同的指令,宣告在前面的那個會被優先呼叫。如果其中一 個的優先順序更高,則不管宣告的順序如何都會被...

AngularJS自定義指令

自定義的指令定義 1.directive 方法可以接受兩個引數,第乙個引數是指令的名字,第二個引數是函式,第二個引數用來返回指令的具體內容。2.指令的引數包括 restrict eacm 分別對應元素 屬性 類名 注釋 主要體現在呼叫指令時的不一樣 優先順序 ngrepeat,來定該自定義標籤的優先...