Angularjs 自定義指令

指令的作用可以簡單的描述為實現語義化的標籤，比如你在移動端h5應用中，有個經常用的功能，比如通訊錄的功能，不同的頁面都要用到，這時你可以將其封裝為指令，在使用的時候可以通過這樣的語義化的標籤直接在頁面中使用即可。

首先實現乙個helloworld的例子，讓我們先上手自定義指令，先體會下指令的妙處。

定義指令helloword

//自定義指令

() ;

});

使用指令

<

helloworld
>
helloworld
>

生成的html

<

div 
ng-view
=""class
="ng-scope"
>
<
h1 class
="ng-scope"
>hello world
h1>
div>

restrict: 說明指令在html中的渲染形式，選項有"a"、"e" 和 "c"， "m" ，分別代表 attribute、element、class和comment（預設值為"a"），對應首字母記起來也很容易。

示例a:

c:m:

transclude

指令的作用是把自定義的指令發標籤替換成瀏覽器能夠認識的標籤，如果自定義的標籤內部出現了子標籤，那麼transclude就可以幫我進行處理了。

//

自定義指令
() ;
});

子標籤1

子標籤2

在指令中負責執行dom操作和註冊事件***。

引數scope：指令的scope的引用。scope變數在初始化時是不被定義的，link方法會註冊監視器監視值變化事件。

element：包含指令的dom元素的引用，link方法一般通過jquery操作例項。

controller：在有巢狀指令的情況下使用。這個引數作用在把子指令的引用提供給父指令，允許指令之間進行互動。

scope

建立指令的作用範圍，scope在指令中作為屬性標籤傳遞。scope是建立可以復用指令的必備條件，每個指令（不論是處於巢狀指令的哪一級）都有其唯一的作用域，它不依賴於父scope。scope物件定義names和types變數。

「@」：(值傳遞，單向繫結)，指令會檢索從父級scope中傳遞而來字串中的值。指令可以使用該值但無法修改，是常用的變數。

「=」：(引用，雙向繫結)，指令檢索scope中的引用取值。值可以是任意型別的，包括符合物件和陣列。指令可以更改父級scope中的值，所以當指令需要修改父級scope中的值時我們就需要這種型別。

「&」：（表示式）在父級scope中起作用的表示式，它允許指令實現比修改值更高階的操作。

實現friends自定義指令

//自定義指令

() };

});

friends模板

<

div 
class
="address_serace"
>
<
input 
class
="form-control"
ng-change
=""ng-model
="friendkey"
placeholder
="search"
>
div>
<
div 
class
="address_div"
>
<
dl class
="address_dl"
ng-repeat
="item in orders"
>
<
dt class
="address_checkbox"
>
<
img 
class
="address_check"
src="../images/[email protected]"
/>
dt>
<
dt class
="address_user"
><
img 
class
="address_user"
src="../images/dingy.png"
/>
dt>
<
dd class
="address_font"
>
<
p class
="address_font_t"
>}
p>
<
p>from：}
p>
dd>
dl>
div>

<

friends
>
friends
>

這裡為了方便直接將模板存在乙個html頁面裡面了，你也可以通過拼接字串的形式將標籤寫在自定義指令裡面。

今天抽空將指令這塊補一下。

參考

angularJs自定義指令

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

AngularJS自定義指令

自定義的指令定義 1.directive 方法可以接受兩個引數，第乙個引數是指令的名字，第二個引數是函式，第二個引數用來返回指令的具體內容。2.指令的引數包括 restrict eacm 分別對應元素 屬性 類名 注釋 主要體現在呼叫指令時的不一樣 優先順序 ngrepeat，來定該自定義標籤的優先...

AngularJS自定義指令

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