angular指令
AngularJS通過使用指令來擴展HTML、為應用程序添加新的功能;允許用戶自定義新的指令。
AngularJS是擴展了HTML屬性,使用格式如下ng-**。
AngularJS的指令有ng-app、ng-init、ng-model等,在接下來會一一解釋。
數據綁定:ng-model和{{}}
“”{{}}“”是AngularJS數據綁定的表達式,數據綁定同步了AngularJS表達式和AngularJS數據;如下例子:
<div ng-app="" ng-init="quantity=2;price=5">
<h2>the sum is:</h2>
number:<input type="number" ng-model="quantity"></input>
price:<input type="number" ng-model="price"></input>
<p>sum:</b>{{quantity*price}}</p>
</div>
重復HTML元素:ng-repeat
ng-repeat指令會重復一個html元素。使用方法如下:
<div ng=app="" ng-init="countries=[‘china’,‘USA‘,‘JAP‘]">
<ul>
<li ng-repeat="c in countries">
{{c}}
</li>
</ul>
</div>
ng-repeat與foreach循環的用法類似。
應用程序根指令:ng-app
ng-app指令定義了應用程序的根元素,該指令會在網頁加載完畢後自動引導(自動初始化)應用程序。
應用程序初始值指令:ng-init
ng-init為應用程序定義了初始值,但是在一般情況下,我們不推薦使用ng-init,而是使用控制器或者模板來替換。
數據綁定指令:ng-model
綁定HTML元素到應用程序數據。ng-model可以提供類型驗證、為應用程序數據提供狀態、為html元素提供css類、綁定html元素到HTML表單。
自定義指令
我們可以使用.direct函數來添加自定義的指令。
註意:在定義的時候是用駱駝發來命名一個指令,茹ngRun,但是在使用的時候需要用“-”分割開來:ng-Run。如下例子:
<div ng-app="app">
<ng-Run></ng-Run>//元素名稱調用
<div ng-Run></div>//屬性調用方式
<div class="ng-Run"></div>//類名調用方式
<script>
var app=angular.model("app",[]);
app.directive("ngRun",function(){
return{
template:"<p>this is a sample<p>"
};
});
</script>
</div>
通過使用restrict來限制指令的調用方式,可以使用如下的幾個限制:
E:作為元素名使用。
A:作為屬性使用。
C:作為類名使用。
M:作為註釋使用。
restrict默認值是EA
angular指令