當(dāng)前位置：首頁 > 人文社科 > 生活经验 >内容正文

生活经验

AngularJS 指令

發(fā)布時間：2023/11/27 生活经验 43 豆豆

生活随笔收集整理的這篇文章主要介紹了 AngularJS 指令小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

1.　　AngularJS指令的特點(diǎn)：

AngularJS通過被稱為指令的新屬性來擴(kuò)展HTML，指令的前綴為ng-。
AngularJS通過內(nèi)置的指令來為應(yīng)用添加功能。
AngularJS允許你自定義指令。

2.　　下面介紹下常見的AngularJS指令：

ng-app指令：定義了AngularJS 應(yīng)用程序的根元素。在網(wǎng)頁加載完畢時會自動引導(dǎo)（自動初始化）應(yīng)用程序。
ng-init指令：為 AngularJS 應(yīng)用程序定義了初始值。通常情況下，不使用 ng-init。您將使用一個控制器或模塊來代替它。
ng-model指令：綁定HTML元素到應(yīng)用程序數(shù)據(jù)。也可以為應(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指令：對于集合中（數(shù)組中）的每個項(xiàng)會克隆一次HTML元素。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript" src="js/angular.min.js"></script></head><body ng-app=""><div ng-init="quantity=1;price=5"></div><h2>價格計(jì)算器</h2>數(shù)量: <input type="number" ng-model="quantity">價格: <input type="number" ng-model="price"><p><b>總價:</b> {{quantity * price}}</p><div ng-init="students=[{name:'小明',class:'一年級一班'},{name:'小紅',class:'一年級二班'},{name:'小方',class:'一年級三班'}]"><p>循環(huán)對象</p><ul><li ng-repeat="x in students">{{x.name+" "+x.class}}</li></ul></div></body>
</html>

3.　　創(chuàng)建自定義的指令：

除了 AngularJS 內(nèi)置的指令外，我們還可以創(chuàng)建自定義指令。
我們可以使用? .directive? 函數(shù)來添加自定義的指令。
要調(diào)用自定義指令，HTML 元素上需要添加自定義指令名。
使用駝峰法來命名一個指令，myDirective，但是在使用的時候要用-分割開，my-directive。
使用自定義指令有四種方式,可以通過restrict屬性來限制使用，E 作為元素名使用、C 作為類名使用、A 作為屬性使用、M 作為注釋使用。
- 通過元素名：
```
<my-directive></my-directive>
```
- 通過類名：必須設(shè)置 restrict 的值為 "C" 才能通過類名來調(diào)用指令。
```
<div class="my-directive"></div>
```
- 通過屬性：
```
<div my-directive></div>
```
- 通過注釋：我們需要在該實(shí)例添加 replace 屬性，否則是不可見的。
```

```
  ?

案例展示：這里是通過元素名的方式來使用自定義指令，別的方式大家可以自行嘗試。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript" src="js/angular.min.js"></script></head><body ng-app="myApp"><my-directive></my-directive><script>var app = angular.module("myApp", []);app.directive("myDirective", function() {return {template: "<h1>這是我的自定義指令!</h1>"};});</script></body>
</html>

轉(zhuǎn)載于:https://www.cnblogs.com/wgl1995/p/6256269.html

總結(jié)

以上是生活随笔為你收集整理的AngularJS 指令的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Docker - Install doc
下一篇：【BZOJ2434】[NOI2011]阿