Was sind die Unterschiede zwischen AngularJS und dem Schreiben von Angular-Direktiven? Eine Einführung in die Unterschiede zwischen AngularJs und den häufig verwendeten Methoden zum Schreiben von Anweisungen

Dieser Artikel stellt Ihnen hauptsächlich den Unterschied zwischen angularjs und den häufig verwendeten Methoden zum Schreiben von Anweisungen in Angular vor. Obwohl der Unterschied nicht groß ist, gibt es dennoch einen Unterschied, den wir berücksichtigen müssen ernsthaft. Schauen wir uns gemeinsam diesen Artikel an

1: AngularJS-Befehl

1.ng-bind

Ersetzt den Inhalt eines HTML-Elements durch den Wert einer bestimmten Variablen oder eines bestimmten Ausdrucks

<p ng-bind="{{text}}"></p>

2.ng-blur

HTML-Element erforderlich, wenn es den Fokus verliert. Ausgeführte Funktionen ( <a>, <input>, <select>, <textarea> unterstützt)

<input ng-blur="pay()" />

3.ng-checked/ng-disabled

ng -checked legt die fest geprüftes Attribut des Kontrollkästchens (Checkbox) oder des Optionsfelds (Radio)
Wenn der ng-disabled-Ausdruck „true“ zurückgibt, wird das Formularfeld deaktiviert (<input>, <select> oder <textarea>)

<input type="checkbox|radio" ng-checked="flag" ng-disabled="flag"></input>

//flag为布尔类型

4.ng-class

Binden Sie eine oder mehrere CSS-Klassen dynamisch an HTML-Elemente.

//写法一
<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 definiert das Stammelement der Anwendung.

• ng-bind Bindet HTML-Elemente an Anwendungsdaten

• ng-bind-html Bindet innerHTML von HTML-Elementen an Anwendungsdaten und entfernt gefährliche Elemente Zeichen in HTML-Strings

• ng-bind-template gibt den Textinhalt an, der durch Vorlagen ersetzt werden soll

• ng-blur Gibt das Verhalten des an Unschärfeereignis

• ng-change gibt den Ausdruck an, der ausgeführt werden soll, wenn sich der Inhalt ändert

• ng-checked gibt an, ob das Element ausgewählt ist

• ng-class Gibt die von HTML-Elementen verwendete CSS-Klasse an.

• ng-class-even Ähnlich wie ng-class, beginnt jedoch nur in geraden Zeilen Funktion

• ng-class-odd Ähnlich wie ng-class, funktioniert aber nur bei ungeraden Zeilen

• ng-click Definiert, wann das Element ist angeklickt Verhalten von

• ng-cloak Verhindert das Flackern der Anwendung, wenn sie gerade geladen wird

• ng-controller Definiert das Controller-Objekt der Anwendung

• ng-copy Gibt das Verhalten von Kopierereignissen an

• ng-csp Ändert die Sicherheitsrichtlinie des Inhalts

• ng -cut Gibt das Verhalten des Schnittereignisses an

• ng-dblclick Gibt das Verhalten des Doppelklickereignisses an

• ng-disabled Gibt an, ob ein Element deaktiviert ist

• ng-focus Gibt das Verhalten von Fokusereignissen an

• ng-form Gibt das HTML-Formular an das Controller-Formular erben

• ng-hide HTML-Element ausblenden oder anzeigen

• ng-href Geben Sie einen Link für das <a>-Element

• ng-if Wenn die Bedingung falsch ist, entfernen Sie HTML-Elemente

• ng-include binden Sie HTML-Dateien in die Anwendung ein

• ng-init Definieren Sie den Initialisierungswert der Anwendung

• ng-jq definiert die Bibliothek, die die Anwendung verwenden muss, z. B.: jQuery

• ng-keydown gibt das Verhalten von Tastendruckereignissen an

• ng-keypress Gibt das Verhalten des Tastendruckereignisses an

• ng -keyup Gibt das Verhalten des Schlüsselfreigabeereignisses an

• ng-list Text in Liste (Array) konvertieren

• ng-model Binden Sie den Wert von HTML-Controller zu Anwendungsdaten

• ng-model-options gibt an, wie das Modell aktualisiert wird

• ng-mousedown gibt das Verhalten an, wenn die Maus gedrückt wird Taste gedrückt wird

• ng-mouseenter gibt das Verhalten des Mauszeigers beim Durchlaufen des Elements an

• ng-mouseleave Gibt das Verhalten an, wenn der Mauszeiger gedrückt wird verlässt das Element

• ng-mousemove Legt das Verhalten des Mauszeigers fest, wenn er das Element verlässt. Verhalten beim Bewegen innerhalb des Elements

• ng- Mouseover gibt das Verhalten an, wenn sich der Mauszeiger über dem Element befindet

• ng-mouseup gibt an, wann der Mauszeiger auf dem Element losgelassen wird. Verhalten, wenn die Maustaste eingeschaltet wird

• ng-non-bindable Gibt an, dass das Element oder Unterelement keine Daten binden kann

• ng-open gibt das Element-Open-Attribut an

• ng-options gibt

  <select><options>

ng-paste in der
• -Liste an, um das Verhalten des Einfügeereignisses festzulegen

• ng-pluralize Informationen gemäß den Lokalisierungsregeln anzeigen

• ng-readonly Geben Sie das schreibgeschützte Attribut des Elements an

• ng-repeat Definieren die Vorlage für alle Daten in der Sammlung

• ng-selected Geben Sie das ausgewählte Attribut des Elements an

• ng-show HTML-Element anzeigen oder ausblenden

• 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学习手册中学习），有问题的可以在下方留言提问

Das obige ist der detaillierte Inhalt vonWas sind die Unterschiede zwischen AngularJS und dem Schreiben von Angular-Direktiven? Eine Einführung in die Unterschiede zwischen AngularJs und den häufig verwendeten Methoden zum Schreiben von Anweisungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!