AngularJS 指令
AngularJS 指令是擴(kuò)展的 HTML 屬性绪励，帶有前綴 ng-递礼。
ng-app 指令初始化一個 AngularJS 應(yīng)用程序楼吃。
ng-init 指令初始化應(yīng)用程序數(shù)據(jù)。
-
ng-model 指令把元素值（比如輸入域的值）綁定到應(yīng)用程序醇坝。
<div ng-app="" ng-init="firstName='John'"> <p>在輸入框中嘗試輸入：</p> <p>姓名：<input type="text" ng-model="firstName"></p> <p>你輸入的為： {{ firstName }}</p> </div>
數(shù)據(jù)綁定
-
AngularJS 中的數(shù)據(jù)綁定胜嗓，同步了 AngularJS 表達(dá)式與 AngularJS 數(shù)據(jù)高职。
<div ng-app="" ng-init="quantity=1;price=5"> <h2>價格計算器</h2> 數(shù)量： <input type="number" ng-model="quantity"> 價格： <input type="number" ng-model="price"> <p><b>總價：</b> {{ quantity * price }}</p> </div> -
實現(xiàn)重復(fù)利用
<div ng-app="" ng-init="names=['Jani','Hege','Kai']"> <p>使用 ng-repeat 來循環(huán)數(shù)組</p> <ul> <li ng-repeat="x in names"> {{ x }} </li> </ul> </div> -
常用指令
-
ng-app
ng-app 指令定義了 AngularJS 應(yīng)用程序的 根元素。
ng-app 指令在網(wǎng)頁加載完畢時會自動引導(dǎo)（自動初始化）應(yīng)用程序兼蕊。
-
ng-init
ng-init 指令為 AngularJS 應(yīng)用程序定義了 初始值初厚。
通常情況下件蚕，不使用 ng-init孙技。您將使用一個控制器或模塊來代替它
-
ng-model
ng-model 指令 綁定 HTML 元素 到應(yīng)用程序數(shù)據(jù)。- ng-model 指令也可以：
- 為應(yīng)用程序數(shù)據(jù)提供類型驗證（number排作、email牵啦、required）。
- 為應(yīng)用程序數(shù)據(jù)提供狀態(tài)（invalid妄痪、dirty哈雏、touched、error）衫生。
- 為 HTML 元素提供 CSS 類裳瘪。
- 綁定 HTML 元素到 HTML 表單。
- ng-model 指令也可以：
-
ng-repeat
ng-repeat 指令對于集合中（數(shù)組中）的每個項會 克隆一次 HTML 元素罪针。
你可以使用 .directive 函數(shù)來添加自定義的指令彭羹。<body ng-app="myApp"> <runoob-directive></runoob-directive> <script> var app = angular.module("myApp", []); app.directive("runoobDirective", function() { return { template : "<h1>自定義指令!</h1>" }; }); </script> </body> -
限制使用
通過添加 restrict 屬性,并設(shè)置只值為 "A", 來設(shè)置指令只能通過屬性的方式來調(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, 即可以通過元素名和屬性名來調(diào)用指令。
-
