如何編寫Angular指令

[20140917]angular：如何編寫乙個指令

body

body>*:first-child

body>*:last-child

p, blockquote, ul, ol, dl, table, pre

h1, h2, h3, h4, h5, h6

h1 tt, h1 code, h2 tt, h2 code, h3 tt, h3 code, h4 tt, h4 code, h5 tt, h5 code, h6 tt, h6 code

h1 h2

h3 h4

h5 h6

body>h2:first-child, body>h1:first-child, body>h1:first-child+h2, body>h3:first-child, body>h4:first-child, body>h5:first-child, body>h6:first-child

a:first-child h1, a:first-child h2, a:first-child h3, a:first-child h4, a:first-child h5, a:first-child h6

h1+p, h2+p, h3+p, h4+p, h5+p, h6+p

a a:hover

ul, ol

ul li>:first-child, ol li>:first-child, ul li ul:first-of-type, ol li ol:first-of-type, ul li ol:first-of-type, ol li ul:first-of-type

ul ul, ul ol, ol ol, ol ul

dl dl dt

dl dt:first-child

dl dt>:first-child

dl dt>:last-child

dl dd

dl dd>:first-child

dl dd>:last-child

pre, code, tt

code, tt

pre>code

pre

pre code, pre tt

kbd

blockquote

blockquote>:first-child

blockquote>:last-child

hr img ps：angularjs適合開發crud的spa

angular directive是構建在dom元素（屬性、標籤名、注釋和css類）上的標記，告訴angularjs的html編譯器($compile) 附加指定的行為到元素或者甚至變換這個元素和它的子集。

ps：通過擴充套件html標籤的方式提供可復用的web元件

ps2：指令的作用：提供語義化標籤

var directivemodule=angular.module('newkit.neghotkeys');
directivemodule.directive('neghotkeys',function(injectables);
return directivedefineobject;
});

引數說明

/*demo1指令定義*/
return 
});/*使用*/
/*結果(指令將滿足條件的元素替換為了新的內容)*/
hello world!
hello world!

操作步驟分析

設定該指令可採用元素的標籤和屬性申明，並設定了乙個文字模板，同時設定了replace=true。

在html中，採用標籤如

和屬性來實現呼叫

/*demo2指令定義*/
return 
});/*使用*/
原始的內容，
還會在這裡。
/*頁面生成的html*/
this is demo2
原始的內容，
還會在這裡。
this is demo2

分析

通過在指令中設定transclude=true，同時在template中包含，實現了將元素內部元素移動到了ng-transclude元素內部，並建立了新的作用域

/*指令*/
return 
}}).directive('demo3compile',function();}}
});/*使用*/
/*頁面生成的html*/
good link
good link
test demo3 compile

分析

compile用於在編譯期處理模板內容，並能設定prelink和postlink函式，此時將不能設定link函式，**如下：

compile:function(telement,tattrs,transclude),
post:function postlink(scope,ielement,iattrs)
};}

link用於對替換後的元素進行操作，如果引數是ielement。

/***在這裡*/
return }
' +            '',
replace:true,
link:function(scope,ielement,iattrs))}}
});/*html在這裡*/
、/*效果請自行測試*/

分析

可以利用指令完成特定的功能了。

**在這裡

指令依附於模組

乙個模組可以有多個指令，但是需要採用示例三的寫法

指令可以語義化標籤，實現html元件化

其他...

如何編寫Angular指令

Angular頁面指令

angular基礎指令

angular指令總結

如何編寫Angular指令

Angular頁面指令

angular基礎 指令

angular指令總結

相關推薦

angular基礎指令