**模板:
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元素世界中的創造者 比如 屬性 元素名...