理解指令的restrict屬性

2021-07-24 00:26:57 字數 1520 閱讀 3067

摘要: 理解angularjs指令的restrict屬性

restrict: eacm中的任意乙個之母。它是用來限制指令的宣告格式的。

e - 元素名稱:<

my-directive

>

my-directive

>

a - 屬性: <

divmy-directive

="exp"

>

div>

c - 類名:<

divclass

="my-directive: exp;"

>

div>

m - 注釋:

示例

<

html

=>

<

body

>

<

hello

>

hello

>

<

divhello

>

div>

<

divclass

="hello"

>

div>

body

>

<

script

src=

"bower_components/angular/angular.js"

>

script

>

<

script

>

var, );

'hello'

, function() 

};});script

>

html

>

執行結果

<

h3>

hi there

h3>

<

h3hello

>

hi there

h3>

<

h3class

="hello"

>

hi there

h3>

<

h3>

hi there

h3>

可以看到幾種方式,做的事情一樣,只有部分地方不同. 這些區別有什麼作用?

有何作用 

restrict=e時,瀏覽器無法識別指令的宣告元素,則這個指令一定是起替換作用,也就是說template一定有值.

restrict=a時,它是以元素屬性存在的,那麼這個指令的作用可以不是替換. 那麼它可以做什麼?以link方式操作dom.

比如在初始時為元素聚焦

type="input" focus/>() 

};});

restrict=c,則是在繫結指令的同時,指定它的css樣式,讓指令與樣式同步.

restrict=m,則在一些場合非常有用,方便在注釋與**之間切換.

TextInput的restrict屬性驗證控制項

restrict 用法 textfield.restrict 此處為可輸入的內容 field.restrict 此處為禁止輸入的內容 restrict屬性支援一些類似正規表示式的樣式 field.restrict a za z 只允許大小字母 field.restrict a za z 只允許字母和...

restrict 和 volatile 的區別

編譯器優化常用的方法是 將記憶體變數快取到暫存器。restrict 和 volatile 都是c語言中關於編譯器優化常用關鍵字 用來做優化的。只能用於約束和限定指標,並表明指標是訪問乙個資料物件的唯一且初始方式。即它告訴編譯器,所有修改該指標所指向記憶體中內容的操作都必須通過該指標進行修改,而不能通...

Vue中列表渲染指令中key屬性的理解

在官網中看到v for指令中key這一塊時,對其感覺懵懵懂懂,查閱了一些資料,把自己的理解記錄下來,做乙個心得,不知道理解的對不對,希望有大牛指導。vue在更新v for指令渲染過的html時,採用的是就地復用策略,也就是已有的html元素不在重新渲染,直接更新部分資料,這對簡單的html來說沒有影...