angular自定義指令詳解

在運用angularjs的時候，運用自定義指令可以寫一些元件，非常方便。這裡給大家分享一些關於angular自定義指令的知識。

對於指令，可以把它簡單的理解成在特定dom元素上執行的函式，指令可以擴充套件這個元素的功能。

.directive('mydirective', function ($timeout, userdefinedservice) );

第乙個引數，指令的名字mydirective 用來在檢視中引用特定的指令。

第二個引數是乙個函式，這個函式返回乙個物件，$compile服務利用這個方法返回的對象，在dom呼叫指令時來構造指令的行為。

.directive('mydirective', function() ,

templateurl: string,

replace: boolean or string,

scope: boolean or object,

transclude: boolean,

controller: string or

function(scope, element, attrs, transclude, otherinjectables) ,

controlleras: string,

require: string,

link: function(scope, ielement, iattrs) ,

compile: // 返回乙個物件或連線函式，如下所示：

function(telement, tattrs, transclude) ,

post: function(scope, ielement, iattrs, controller)

} // 或者

return function postlink(...)

} }; });

restrict 指令在dom中可以何種形式被引用或宣告

可選值如下： （ 可組合使用 ）

e（元素）

a（屬性，預設值）

c（類名）

m（注釋） <--directive:my-directive expression-->

priority 優先順序用來表示指令使用的優先順序

如果乙個元素上具有兩個優先順序相同的指令，宣告在前面的那個會被優先呼叫。如果其中一個的優先順序更高，則不管宣告的順序如何都會被優先呼叫：具有更高優先順序的指令總是優先執行。

terminal 用來告訴angularjs停止執行當前元素上比本指令優先順序低的指令。但同當前指令優先順序相同的指令還是會被執行。

這是自定義指令

var myctr=["$scope",function($scope){}]

return

}});

return

}});

template

用來表示模板，可以是一段字串，如「這是自定義指令」,也可以是乙個函式，可以參考上面的例子

template:function(telement, tattrs)

templateurl 用來表示模板，與上面的template功能相似，但表示路徑，可以是外部html檔案路徑的字串也可以是乙個可以接受兩個引數的函式，引數為telement和tattrs，並返回乙個外部html檔案路徑的字串。

replace 預設為false，模板會被當作子元素插入到呼叫此指令的元素內部，為true，則直接替換此元素


.directive('somedirective', function() ; }); 
some stuff here
.directive('somedirective', function() ; }); 
some stuff here

scope

（1）當scope設定為true時，會從父作用域繼承並建立乙個新的作用域物件。（2）預設為false，並不會建立新的作用域物件，直接使用父scope。

（3）設定為{}，表示隔離作用域，指令的模板就無法訪問外部作用域了

var myctr=["$scope",function($scope)]
return }',
scope:{},
controller:function($scope)
}});

當然，angularjs提供了幾種方法能夠將指令內部的隔離作用域，同指令外部的作用域進行資料繫結。

（a）@ (or @attr) 單向繫結，外部scope能夠影響內部scope，但反過來不成立

（b）= (or =attr)  雙向繫結，外部scope和內部scope的model能夠相互改變

![描述][1]
上面的輸入框輸入，下面會變，下面的輸入框輸入上面的也會變
（c）& (or &attr) 把內部scope的函式的返回值和外部scope的任何屬性繫結起來

controller

controller引數可以是乙個字串或乙個函式。當設定為字串時，會以字串的值為名字，來查詢註冊在應用中的控制器的建構函式.當為函式時，可以像平時寫控制器那樣寫，可以將任意可以被注入的angularjs服務傳遞給控制器

controlleras（字串）

controlleras引數用來設定控制器的別名，可以以此為名來發布控制器，並且作用域可以訪問controlleras。這樣就可以在檢視中引用控制器，甚至無需注入$scope。

require

require引數可以被設定為字串或陣列，字串代表另外乙個指令的名字。require會將控製器注入到其值所指定的指令中，並作為當前指令的鏈結函式的第四個引數。

字串或陣列元素的值是會在當前指令的作用域中使用的指令名稱。

angular自定義指令詳解

angular 自定義指令

angular自定義指令Directive使用方法

Angular1建立自定義指令

angular自定義指令詳解

angular 自定義指令

angular自定義指令Directive使用方法

Angular1建立自定義指令

相關推薦