當前位置：
首頁 >
AngularJS 指令
發布時間：2023/11/27
61
豆豆
生活随笔
收集整理的這篇文章主要介紹了
AngularJS 指令
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1. AngularJS指令的特點：
- AngularJS通過被稱為指令的新屬性來擴展HTML，指令的前綴為ng-。
- AngularJS通過內置的指令來為應用添加功能。
- AngularJS允許你自定義指令。
2. 下面介紹下常見的AngularJS指令：
- ng-app指令：定義了AngularJS 應用程序的根元素。在網頁加載完畢時會自動引導（自動初始化）應用程序。
- ng-init指令：為 AngularJS 應用程序定義了初始值。通常情況下，不使用 ng-init。您將使用一個控制器或模塊來代替它。
- ng-model指令：綁定HTML元素到應用程序數據。也可以為應用程序數據提供類型驗證（number、email、required）、為應用程序數據提供狀態（invalid、dirty、touched、error）、為 HTML 元素提供 CSS 類、綁定 HTML 元素到 HTML 表單。
- ng-repeat指令：對于集合中（數組中）的每個項會克隆一次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>價格計算器</h2>數量: <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>循環對象</p><ul><li ng-repeat="x in students">{{x.name+" "+x.class}}</li></ul></div></body> </html>
?
?
3. 創建自定義的指令：
- 除了 AngularJS 內置的指令外，我們還可以創建自定義指令。
- 我們可以使用? .directive? 函數來添加自定義的指令。
- 要調用自定義指令，HTML 元素上需要添加自定義指令名。
- 使用駝峰法來命名一個指令，myDirective，但是在使用的時候要用-分割開，my-directive。
- 使用自定義指令有四種方式,可以通過restrict屬性來限制使用，
E作為元素名使用、C作為類名使用、A作為屬性使用、M作為注釋使用。- 通過元素名：
<my-directive></my-directive>
- 通過類名：必須設置 restrict 的值為 "C" 才能通過類名來調用指令。
<div class="my-directive"></div>
- 通過屬性：
<div my-directive></div>
- 通過注釋：我們需要在該實例添加 replace 屬性， 否則是不可見的。
<!-- directive: my-directive -->
?
- 通過元素名：
- 案例展示：這里是通過元素名的方式來使用自定義指令，別的方式大家可以自行嘗試。
<!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>
?
?
轉載于:https://www.cnblogs.com/wgl1995/p/6256269.html
總結
以上是生活随笔為你收集整理的AngularJS 指令的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Docker - Install doc
- 下一篇： 【BZOJ2434】[NOI2011]阿