本篇文章主要的向大家介紹了關於angularjs與angular常用的指令寫法的區別，雖然區別不大，但是還是有區別的，我們也要認真對待。下面就讓我們一起來看這篇文章吧
一：angularjs指令
1.ng-bind
#使用給定的變數或表達式的值來取代HTML 元素的內容
<p ng-bind="{{text}}"></p>登入後複製
#2.ng-blur
HTML 元素在失去焦點時需要執行的函數（<a>, <input>, <select>, <textarea>支援）
<input ng-blur="pay()" />
登入後複製
3.ng-checked/ng-disabled
#ng-checked設定複選框(checkbox)或單選按鈕(radio)的checked 屬性
ng-disabled表達式傳回true 則表單欄位將會停用(<input>, <select>, 或<textarea>)
<input type="checkbox|radio" ng-checked="flag" ng-disabled="flag"></input>
//flag为布尔类型
登入後複製
4.ng-class
給HTML 元素動態綁定一個或多個CSS 類別。
//写法一
<p ng-class="home"></p>
//写法二
<p ng-class="{'red':flag,'green':'!flag'}"></p>
//flag为true则添加red类名，false则添加green类名登入後複製
5.ng-click
<button ng-click="addpay($event)">OK</button>
//$event为当前元素的多种属性
登入後複製
#6.ng-repeat
<p ng-repeat="(index,item) in list"></p>
// 每项值：{{item}}
// 下标：{{index}}登入後複製
ng -app 定義應用程式的根元素。
ng-bind 綁定HTML 元素到應用程式資料
ng-bind-html 綁定HTML 元素的innerHTML 到應用程式資料，並移除HTML 字串中危險字元
ng-bind-template 規定要使用範本取代的文字內容
ng-blur規定blur 事件的行為
ng-change 規定在內容改變時要執行的表達式
- ##ng-checked 規定元素是否被選中
- ng-class 指定HTML 元素使用的CSS 類別
- ng-class-even 類似ng-class，但只在偶數行起作用
- ng-class-odd 類似ng-class，但只在奇數行起作用
##ng-click 定義元素被點擊時的行為-
ng-copy 規定拷貝事件的行為- <a>
# 元素指定連結
-
#<a>
元素指定連結
-
ng-if 如果條件為false 移除HTML 元素
ng-include 在應用程式中包含HTML 檔案
#ng-init定義應用的初始化值
ng-jq 定義應用程式必須使用到的函式庫，如：jQuery
ng-keydown 規定按下按鍵事件的行為
ng-keypress 規定按下按鍵事件的行為
-
ng-keyup 規定鬆開按鍵事件的行為
ng-list 將文字轉換為清單(陣列)
ng-model 綁定HTML 控制器的值到應用資料
ng-model-options 規定如何更新模型
#ng-mousedown 規定按下滑鼠按鍵時的行為
#ng-mouseenter 規定滑鼠指標穿過元素時的行為
ng-mouseleave 規定滑鼠指標離開元素時的行為
#ng- mousemove 規定滑鼠指標在指定的元素中移動時的行為
#ng-mouseover 規定滑鼠指標位於元素上方時的行為
ng-
ng-
ng-
ng-
ng-
-
###ng-options 在###<select>### 清單中指定######### ##########ng-paste 規定貼上事件的行為############ng-pluralize 依照本地化規則顯示訊息############ #ng-readonly 指定元素的readonly 屬性############ng-repeat 定義集合中每項資料的範本############ng-selected 指定元素的範本#############ng-selected 指定元素的selected 屬性############ng-show 顯示或隱藏HTML 元素###
ng-src 指定 ![]()
元素的 src 属性
ng-srcset 指定 ![]()
元素的 srcset 属性
ng-style 指定元素的 style 属性
ng-submit 规定 onsubmit 事件发生时执行的表达式
ng-switch 规定显示或隐藏子元素的条件
ng-transclude 规定填充的目标位置
ng-value 规定 input 元素的值
想看更多推荐到PHP中文网angularjs学习手册中学习。
二：angular指令
imageUrl 属性：
<img [src]="imageUrl">
登入後複製
[disabled]当组件为 isUnchanged( 未改变 ) 时禁用一个按钮：
<button [disabled]="isUnchanged">按钮是禁用的</button>
登入後複製
设置指令的属性：
<p [ngClass]="classes">[ngClass]绑定到classes 属性</p>
登入後複製
表格的colspan/rowspan
<table border=1>
<tr><td [attr.colspan]="1 + 1">One-Two</td></tr>
<tr><td>Five</td><td>Six</td></tr>
</table>
登入後複製
[(NgModel)]
<input [(ngModel)]="currentUser.firstName">
登入後複製
NgIf
<p *ngIf="currentUser">Hello,{{currentUser.firstName}}</p>登入後複製
NgFor
<p *ngFor="let user of users; let i=index">{{i + 1}} - {{user.fullName}}</p>登入後複製
（click）
<button type="submit" class="btn btn-primary" (click)="hide()">确定</button>
登入後複製
[(checked)]
<input type="checkbox" [(checked)]="checkflag">
登入後複製
-
common
NgClass
NgComponentOutlet
NgForOf
NgIf
NgPlural
NgPluralCase
NgStyle
NgSwitch
NgSwitchCase
NgSwitchDefault
NgTemplateOutlet
登入後複製
-
forms
CheckboxControlValueAccessor
CheckboxRequiredValidator
DefaultValueAccessor
EmailValidator
FormArrayName
FormControlDirective
FormControlName
FormGroupDirective
FormGroupName
MaxLengthValidator
MinLengthValidator
NgControlStatus
NgControlStatusGroup
NgForm
NgModel
NgModelGroup
NgSelectOption
PatternValidator
RadioControlValueAccessor
RequiredValidator
SelectControlValueAccessor
SelectMultipleControlValueAccessor
登入後複製
-
router
RouterLink
RouterLinkActive
RouterLinkWithHref
RouterOutlet
登入後複製
好了，以上就是本篇文章的全部内容了（想看更多就到PHP中文网angularjs学习手册中学习），有问题的可以在下方留言提问
以上是angularjs和angular指令寫法的差別有哪些？ AngularJs與Angular常用的指令寫法區別的介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！
