angular 自定義指令

2022-07-23 04:21:12 字數 2867 閱讀 6383

**模板:

var mymodule = angular.module("mymodule",);

mymodule.directive('directivename',function(){

return{

restrict:string,

template:string,

templateurl:string,

priority:number,

replace:boolean,

transclude:boolean,

scope:bollean 或 object,

controller: string 或 function,

require: string 或 array,

link:function(scope,element,attrs){

compile:function(element,attrs,transclude){

指定了如何在模模板中使用自定義的指令。取值可為e、a、c、m中的乙個,或任意組合。如:'a','ea','eac','eacm'。若物件中沒有指定restrict屬性,預設為'a'。

e:表示元素的名稱

a:表示元素的屬性

c:表示css中的class

m:表示注釋

template:指令的內聯模板。

templateurl:指令的內聯模板的url。

數字,可選引數,致命指令的優先順序,若在單個dom元素上有多個指令,則優先順序高的先執行。

當然,設定指令的優先順序不太常用,但是比較特殊的例子是,內建指令ng-repeat的優先順序為1000,而ng-init的優先順序為 450。

若取值為true,模板(template)替換指令所在的元素;若取值為fasle,把模板(template)放在指令所在元素的內部。預設情況下,值為false。

把template的值設為'good!'

布林值,預設值為false

這個配置選項可以讓我們提取包含在指令那個元素裡面的內容,再將它放置在指令模板的特定位置。當我們開啟transclude之後,我們就可以使用ng-transclude來指明應該在什麼地方放置transclude的內容

template值設定為'

good!'

(1)false

自定義指令的scope物件就是指令所在的scope物件(即作用域)。

(2)true

自定義指令新建了乙個scope物件,並繼承外層的scope。

(3)object

自定義指令建立了乙個scope物件,不繼承外層的scope,新建的scope是獨立的,與外層scope隔離。

自定義指令scope需要通訊時,可以通過傳遞屬性名對映的方式把父scope中指定的屬性傳遞給這個獨立的scope。

繫結策略:

a.@單向文字繫結,傳遞乙個字串值,傳遞的資料型別只能是字串。當父作用域屬性改變時,隔離的scope中的屬性值隨著變化;當隔離的scope中的屬性值改變時,父作用域的屬性值不隨著變化。

b.=雙向繫結,傳遞父作用域的乙個屬性,傳遞的資料型別可以是字串、陣列、物件等。當父作用域屬性改變時,隔離的scope中的屬性值隨著變化;當隔離的scope中的屬性值改變時,父作用域的屬性值也隨著變化。

c.&執行父作用域中的函式。

如下**所示:

編譯階段對模版自身進行轉換,把指令的模板新增到dom樹上。在編譯階段會執行指令自定義的compile函式,可以對dom操作。

鏈結階段對模板和資料進行繫結,執行prelink函式和postlink函式。編譯時,先執行postlink,執行完子指令的prelink、postlink後,再執行postlink函式。

獲取link欄位:

1.當compile欄位存在時,link欄位將被忽略,compile函式的返回值將作為link欄位。

2.當compile欄位不存在,link欄位存在時,該link欄位會在指令鏈結階段訪問。

link欄位兩種情況:

1.若為函式,這個函式會被認為是postlink函式。

2.若為物件,那麼link.pre作為prelink函式,link.post作為postlink函式。

如上**所示,定義compile欄位,compile函式返回的物件的pre函式、post函式,分別是指令鏈結時執行的prelink函式、postlink函式。

如上**,llink函式為指令編譯時的postlink函式。

require欄位表示引用的父指令或祖父指令的控制器的例項,該例項傳入到指令link函式的第4個引數。

在require的引數值加上下面的某個字首,確定查詢控制器的行為:

如上**,mychild指令通過require:'^myparent'指定使用myparent指令的控制器例項,並且作為實參傳入mychild指令的link函式的第4個引數。在link函式內可訪問myparent控制器例項。

[1]用angularjs開發下一代web應用

[2][3]

angular自定義指令詳解

在運用angularjs的時候,運用自定義指令可以寫一些元件,非常方便。這裡給大家分享一些關於angular自定義指令的知識。對於指令,可以把它簡單的理解成在特定dom元素上執行的函式,指令可以擴充套件這個元素 的功能。directive mydirective function timeout,u...

angular自定義指令Directive使用方法

1.建立directive ts檔案 highlight.directive.component.ts directive,elementref 引用2個屬性 import from angular core directive 注入elementref物件 constructor private ...

Angular1建立自定義指令

高能警告 這是一篇面向有angular1專案基礎經驗開發者的文章,如果你是在查詢directives api,你應該去 compile api 文件那邊。牆那邊的傳送門 嗖 什麼是directive?在angular1的高階學習中,directives就是dom元素世界中的創造者 比如 屬性 元素名...