ng-app 指令
ng-app 指令定義了 AngularJS 應(yīng)用程序的 根元素凛俱。
ng-app 指令在網(wǎng)頁(yè)加載完畢時(shí)會(huì)自動(dòng)引導(dǎo)(自動(dòng)初始化)應(yīng)用程序唆途。
稍后您將學(xué)習(xí)到 ng-app 如何通過(guò)一個(gè)值(比如 ng-app="myModule")連接到代碼模塊。
ng-init 指令
ng-init 指令為 AngularJS 應(yīng)用程序定義了 初始值焕襟。
通常情況下陨收,不使用 ng-init。您將使用一個(gè)控制器或模塊來(lái)代替它鸵赖。
稍后您將學(xué)習(xí)更多有關(guān)控制器和模塊的知識(shí)务漩。
ng-model 指令
ng-model 指令 綁定 HTML 元素 到應(yīng)用程序數(shù)據(jù)。
ng-model 指令也可以:
為應(yīng)用程序數(shù)據(jù)提供類型驗(yàn)證(number它褪、email饵骨、required)。
為應(yīng)用程序數(shù)據(jù)提供狀態(tài)(invalid茫打、dirty居触、touched妖混、error)。
為 HTML 元素提供 CSS 類轮洋。
綁定 HTML 元素到 HTML 表單制市。
ng-repeat 指令
ng-repeat 指令對(duì)于集合中(數(shù)組中)的每個(gè)項(xiàng)會(huì) 克隆一次 HTML 元素。
創(chuàng)建自定義的指令
除了 AngularJS 內(nèi)置的指令外砖瞧,我們還可以創(chuàng)建自定義指令息堂。
你可以使用 .directive 函數(shù)來(lái)添加自定義的指令。
要調(diào)用自定義指令块促,HTMl 元素上需要添加自定義指令名荣堰。
使用駝峰法來(lái)命名一個(gè)指令, runoobDirective, 但在使用它時(shí)需要以 - 分割, runoob-directive:
<body ng-app="myApp">
<runoob-directive></runoob-directive>
<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return { template : "<h1>自定義指令!</h1>"};
});
</script>
</body>
你可以通過(guò)以下方式來(lái)調(diào)用指令:
- 元素名
<runoob-directive></runoob-directive>
- 屬性
<div runoob-directive></div>
- 類名
<div class="runoob-directive"></div>
- 注釋
<!-- 指令: runoob-directive -->
限制使用
你可以限制你的指令只能通過(guò)特定的方式來(lái)調(diào)用竭翠。
通過(guò)添加 restrict 屬性,并設(shè)置值為 "A", 來(lái)設(shè)置指令只能通過(guò)屬性的方式來(lái)調(diào)用:
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
restrict : "A",
template : "<h1>自定義指令!</h1>"
};
});
restrict 值可以是以下幾種:
E
只限元素名使用
A
只限屬性使用
C
只限類名使用
M
只限注釋使用
restrict 默認(rèn)值為 EA, 即可以通過(guò)元素名和屬性名來(lái)調(diào)用指令振坚。