11 指令詳解

2021-08-19 04:24:28 字數 4213 閱讀 4531

指令就是一些附加在html元素上的自定義標記(例如:屬性,元素,或css類),它告訴angularjs的html編譯器 ($compile) 在元素上附加某些指定的行為,甚至操作dom、改變dom元素,以及它的各級子節點。

通過自定義指令訪問dom: 對於angular,乙個程式中唯一允許接觸dom的地方就是「指令」。之所以這樣要求,是因為需要訪問dom的**難以進行自動化測試。 如果你需要直接訪問dom,那麼你就應該為此寫乙個自定義指令。

指令的生命週期開始於$compile方法並結束於 link 方法。

angular把乙個元素的標籤和屬性名字進行規範化,來決定哪個元素匹配哪個指令。 我們通常用區分大小寫的規範化命名方式–駝峰法–(比如ngmodel)來識別指令。 然而,html是區分大小的,所以我們在dom中使用的指令只能用小寫的方式命名, 通常使用破折號間隔的形式(比如:ng-model).

即,使用駝峰法來命名乙個指令,runoobdirective, 但在使用它時需要以 - 分割,runoob-directive

$compile(編譯)可以基於元素名字、屬性、類名和注釋來匹配指令的。angular提供的所有指令都支援元素名、屬性、類名和注釋的形式。

語法:module.directive(name,directivefactory);

呼叫這個方法表示這個模組將在$compileprovider中註冊乙個指令

引數:

module.directive 接受規範化normalized 的指令名字和工廠方法。此工廠方法應該返回乙個帶有不同選項的物件來告訴 編譯器$compile此指令被匹配上該做些什麼。

工廠函式僅在 編譯器 第一次匹配到指令的時候呼叫一次. 你可以在這裡進行初始化的工作。 該函式使用$injector.invoke呼叫,所以它可以像控制器一樣進行依賴注入。

module.directive用return語句返回另乙個指令函式,使用該自定義指令,angular就會呼叫這個函式。

指令函式接受三個引數,第乙個scope,用於檢查在檢視中可用的資料。 第二個引數element是乙個jqlite物件,jqlite是angular提供乙個剪裁版本的jquery。第三個引數是attrs。

指令定義的物件為編譯器提供說明,其屬性有:

controller:string orfunction(scope, element, attrs, transclude, otherinjectables)

該指令的控制器建構函式。控制器將會在預編譯之前被例項化,並且可與其他指令共享(參見require屬性)。這實現了指令之間的通訊,增強了相互之間的行為。可寫入以下引數:

$element:當前元素。

$attr:當前元素上的屬性。

$transclude:乙個被預繫結到正確的嵌入範圍的linking函式。該範圍可以通過乙個第乙個可選的引數重寫。function([scope], clonelinkingfn).

require:string

需要另外乙個指令並將其控制器作為第四個引數注入linking函式。需要以指令的字串名稱(或字串陣列)注入。如果使用了陣列,注入的引數將是乙個陣列中的相應的順序。如果沒有找到這樣的指令,或如果該指令沒有控制器,那麼將會出現乙個錯誤。該屬性名稱字首為:

controlleras:string

指令作用域內的控制器的別名。控制器的別名,以便在該指令模板中引用。該指令需要在適用範圍內定義此配置。當指令被用作元件的情況下有用。

restrict:string

eacm的子集,限制了對乙個特定的指令宣告式的指令。

template:string or template function

將html的內容的指令塊替換當前元素。過程將在新元素上更新之前舊元素的所有屬性/類。該屬性可以指定模板作為乙個字串或乙個函式模板,採用兩個引數telement和tattrs,並返回乙個表示模板的字串值。

templateurl:string

與template基本相同,但模板通過指定的url載入。因為模板是非同步載入的,所以complie和link都會被占用,等待模板載入完。

replace: boolean or string

指定要插入模組的位置,預設為false。

* true:模板將會替換當前元素。

* false:模板將會替換當前元素的內容。

compile

function

(telement, tattrs, transclude) ,

post: function

(scope, ielement, iattrs, controller)

}// 或者

// return function postlink(...)

}

compile函式分配模板的轉換。由於大多數指令不做模板轉換,所以它不經常使用。需要用到compile去轉換模板的例子有ngrepeat,或者非同步載入內容,如ngview。編譯需要如下引數:

link

如果未定義compile屬性,則使用此屬性。

function

link

(scope, ielement, iattrs, controller, transcludefn)

link函式負責註冊dom監聽及更新dom操作,該函式在模板被轉殖後執行。大部分指令邏輯是放在這裡面的。

函式引數:

* scope:被註冊監聽的指令使用的作用域。

* ielement:元素例項,使用該指令的元素。當子元素已被關聯,那麼只能在postlink函式內操作是安全的。

* iattrs:屬性例項,在這個元素上宣告的屬性,在所有指令的linking函式內共享。

* controller:如果至少有乙個指令的元素定義乙個控制器,那麼是個控制器例項。控制器在所有的指令中被共享,它允許指令使用控制器作為通訊通道。

* transcludefn:預繫結到正確的嵌入範圍的乙個linking函式。範圍可以通過乙個可選的第乙個引數重寫--function([scope], clonelinkingfn)

pre-linking 函式:在關聯子元素之前執行。

post-linking函式:在關聯子元素之後執行。

為了讓新的指令作用域可以訪問當前本地作用域中的變數,需要使用下面三種別名中的一種。

例如,假設我們在開發乙個電子郵件客戶端,並且要建立乙個電子郵件的文字輸入框:

type="text"

ng-model="to"/>

scope-example

ng-model="to"

on-send="sendmail(email)"

from-name="[email protected]" />

scope:

lang="en">

charset="utf-8">

titletitle>

href="../../css/bootstrap.css"

rel="stylesheet">

src="../../script/angular.min.js">

script>

var m= angular.module("my", )

m.controller("ctr1", function

($scope) );

m.controller("ctr2", function

($scope) );

m.directive('highlight', function

() else}})

script>

head>

class="container">

今天是星期幾?h2>

ng-controller="ctr1"

highlight="星期二">今天是}p>

ng-controller="ctr2"

highlight="星期一">明天是}p>

div>

body>

html>

8086指令速查

一 資料傳輸指令 它們在存貯器和暫存器 暫存器和輸入輸出埠之間傳送資料.1.通用資料傳送指令.mov 傳送字或位元組.movsx 先符號擴充套件,再傳送.movzx 先零擴充套件,再傳送.push 把字壓入堆疊.pop 把字彈出堆疊.pusha 把ax,cx,dx,bx,sp,bp,si,di依次壓...

2 指令字首

怎麼判斷是不是字首指令呢?字首指令就幾個,很好確定,根據指令的內容來確定 字首指令最多是4個,每組乙個 1 lock 和repeat字首指令 lock f0 鎖位址匯流排的 在同一時刻只能有乙個核的cpu來讀取那條指令,這個指令在多核下才有意義 repne repnz f2 重複執行 當zf是0的時...

8086指令格式

8086的指令使用的是1 6byte s 的變長指令。由3個部分組成 舉幾個例子,下圖是1byte 6bytes不同長度指令的劃分 先來翻譯一下上面的各個部分 d destination 目的運算元,w word 字,mod 模式 方式,reg register 暫存器,r m register m...