angularjs和angular指令寫法的差別有哪些？ AngularJs與Angular常用的指令寫法區別的介紹

本篇文章主要的向大家介紹了關於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="{&#39;red&#39;:flag,&#39;green&#39;:&#39;!flag&#39;}"></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-cloak    在應用正要載入時防止其閃爍
ng-controller    定義應用的控制器物件
ng-copy    規定拷貝事件的行為
#ng-csp    修改內容的安全策略
#ng -cut    規定剪切事件的行為
ng-dblclick    規定雙擊事件的行為
ng-disabled    規定一個元素是否已停用
ng-focus    規定聚焦事件的行為
#ng-form    指定HTML 表單繼承控制器表單
#ng-hide    隱藏或顯示HTML 元素
#ng-href    為the
• <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-

• ng-

ng-

• ng-

ng-

• ng-

mouseup    規定當在元素上放開滑鼠按鈕時的行為
ng-non-bindable    規定元素或子元素不能綁定資料
#ng-open    指定元素的open 屬性

• ###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中文網其他相關文章！