1. 程式人生 > >angular指令

angular指令

應用程序 script anti model repeat lar 新的 mode 表達

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指令