AngularJS自定義指令

2021-08-22 14:49:32 字數 1966 閱讀 2662

自定義的指令定義

1.directive()方法可以接受兩個引數,第乙個引數是指令的名字,第二個引數是函式,第二個引數用來返回指令的具體內容。

2.指令的引數包括:

restrict:eacm(分別對應元素、屬性、類名、注釋),主要體現在呼叫指令時的不一樣

優先順序:ngrepeat,來定該自定義標籤的優先順序,預設優先順序是0

terminal(布林型):可以 設定為true或是false,用來告訴angular當其停止的似乎,比該指令優先順序低的話就會停止執行(當值為true的話)

template(字串或是函式):引數是可以選擇的,必須設定為一下兩種形式之一

(1)可以使html的文字

(2)可以接受兩個引數。引數分別為telement、tattrs

templateurl(字串或是函式):引數可以選擇,通常為以下幾種型別

(1)外部的html路徑,可以進行跳轉,跳轉到外部的路徑

(2)乙個可以接受兩個引數的函式,引數為 telement 和 tattrs ,並返回乙個外部html檔案

路徑的字串。

replace(布林型):一旦設定,則這個值是true,因為這個屬性是預設存在的,存在的值就是false

指令的作用域

1.預設情況下,子指令會被賦予訪問 父級dom的元素對應作用域的能力

2.scope引數(布林型或是物件):當設定為true的時候,從父作用域會繼承並建立乙個新的物件--隔離作用域。

如果建立乙個從外部原型繼承作用域的指令,scope要設定為true

3.隔離作用域:(以物件導向為基礎):(1)建立可以復用的元件,元件可以在未知的上下文進行使用,可以避免汙染外部作用域或是不經意的汙染內部作用域

(2)建立具有隔離作用域的要將scope屬性設定為乙個空的物件,指令模板無法訪問外部作用域。

4.繫結策略:angularjs提供了幾種將指令內部的隔離作用域,並且和外部的作用域進行資料的繫結

(1)本地作用域屬性:@將本地作用域和dom屬性的值進行繫結,指令的內部也可以使用外部作用域的變數--@(@attr)

(2)雙向資料繫結:=可以將本地作用域上的屬性和父級作用域上的屬性進行雙向的資料繫結。,本地的屬性也會反映在父級資料模型發生的變化--=(=attr)

(3)父級作用域繫結:&可以對父級的作用域進行繫結,換句話說:對這個值進行設定的時候,會生成乙個指向父級作用域的包裝函式。--&(&attr)

look~look:

棒棒噠)

5.transclude:(1)是乙個可選的引數,但是一旦設定,那麼值必須是true,因為預設值就是false

(2)可以將任意內容和作用域傳遞給指令,該模板也可以訪問外部的作用域物件

(3)為了將作用域傳遞進去,scope必須通過{}或是true設定成隔離的作用域,if沒有scope引數,指令內部的作用域將會被設定成傳入模板的作用域

(4)應用場景:當你希望建立乙個包含任意內容的指令的時候,將這個引數設定為true

6.controller:引數可以是字串或是函式

7.controlleras:設定控制器的別名,可以以此為名來發布控制器,並且作用域可以訪問 controlleras(沒啥用)

9.自定義渲染:義 $render 方法可以定義檢視具體的渲染方式。這個方法會在 $parser 流水線完成後被呼叫。

10.link:用link可以操作dom的指令,這個函式是可選的;link函式對繫結了實時資料的dom具有控制的能力,需要考慮一下效能的因素。

(1)link的函式簽名如下:link:function(scope,element,attrs)

(2)但是一旦指令的定義中有require,函式簽名中就會有4個引數,代表了控制器或是所依賴的指令的控制器

小結:$scope:和指令相關聯的當前作用域

$element:當前指令對應的元素

$attrs: 當前元素的組成的物件

有具體的如下屬性:

$transclude:嵌入函式會與對應的嵌入作用域進行預繫結

angularJs自定義指令

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

Angularjs 自定義指令

指令的作用可以簡單的描述為實現語義化的標籤,比如你在移動端h5應用中,有個經常用的功能,比如通訊錄的功能,不同的頁面都要用到,這時你可以將其封裝為指令,在使用的時候可以通過這樣的語義化的標籤直接在頁面中使用即可。首先實現乙個helloworld的例子,讓我們先上手自定義指令,先體會下指令的妙處。定義...

AngularJS自定義指令

除了 angularjs 內建的指令外,我們還可以建立自定義指令。你可以使用 directive函式來新增自定義的指令。要呼叫自定義指令,html 元素上需要新增自定義指令名。使用駝峰法來命名乙個指令,runoobdirective,但在使用它時需要以 分割,runoob directive run...