Quelles sont les différences entre l'écriture de directives angulaires et angulaires ? Une introduction aux différences entre AngularJs et les méthodes d'écriture d'instructions couramment utilisées par Angular

Cet article vous présente principalement la différence entre angularjs et les méthodes d'écriture d'instructions couramment utilisées en angulaire. Bien que la différence ne soit pas grande, il y a quand même une différence, et nous devons la prendre. sérieusement. Jetons un coup d'œil ensemble à cet article

1 : commande angulairejs

1.ng-bind

Remplacez le contenu de l'élément HTML par la valeur de la variable ou de l'expression donnée

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

2.ng-blur

L'élément HTML perd le focus Fonctions qui ont besoin à exécuter (<a>, <input>, <select>, <textarea> pris en charge)

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

3.ng-checked/ng-disabled

ng-checked définit l'attribut vérifié de la case à cocher (case à cocher) ou du bouton radio (radio)
Si l'expression ng-disabled renvoie vrai, le champ du formulaire sera désactivé (<input>, <select> ou <textarea>)

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

//flag为布尔类型

4.ng-class

Liez dynamiquement une ou plusieurs classes CSS à des éléments HTML.

//写法一
<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-clic

<button ng-click="addpay($event)">OK</button>
//$event为当前元素的多种属性

6.ng-répéter

<p ng-repeat="(index,item) in list"></p>
// 每项值：{{item}}
// 下标：{{index}}

• ng-app Définit l'élément racine de l'application.

• ng-bind Lie les éléments HTML aux données d'application

• ng-bind-html Lie le HTML interne des éléments HTML aux données d'application et supprime les éléments dangereux caractères dans les chaînes HTML

• ng-bind-template spécifie le contenu du texte à remplacer par des modèles

• ng-blur Spécifie le comportement du événement flou

• ng-change spécifie l'expression à exécuter lorsque le contenu change

• ng-checked précise si l'élément est sélectionné

• ng-class Spécifie la classe CSS utilisée par les éléments HTML

• ng-class-even Semblable à ng-class, mais ne commence que sur les lignes paires Fonction

• ng-class-odd Similaire à ng-class, mais ne fonctionne que sur les lignes impaires

• ng-click Définit quand l'élément est cliqué Comportement de

• ng-cloak Empêche l'application de scintiller lorsqu'elle est sur le point de se charger

• ng-controller Définit l'objet contrôleur de l'application

• ng-copy Spécifie le comportement des événements de copie

• ng-csp Modifie la politique de sécurité du contenu

• ng -cut Spécifie le comportement de l'événement cut

• ng-dblclick Spécifie le comportement de l'événement double-clic

• ng-disabled Spécifie si un élément est désactivé

• ng-focus Spécifie le comportement des événements de focus

• ng-form Spécifie le formulaire HTML à hériter du formulaire du contrôleur

• ng-hide Masquer ou afficher l'élément HTML

• ng-href Spécifier un lien pour l'élément <a>

• ng-if Si la condition est fausse Supprimer les éléments HTML

• ng-include Inclure les fichiers HTML dans l'application

• ng-init Définir la valeur d'initialisation de l'application

• ng-jq définit la bibliothèque que l'application doit utiliser, telle que : jQuery

• ng-keydown spécifie le comportement des événements de pression sur une touche

• ng-keypress Spécifie le comportement de l'événement de pression sur une touche

• ng-keyup Spécifie le comportement de l'événement de libération de clé

• ng-list Convertir le texte en liste (tableau)

• ng-model Lier le valeur du contrôleur HTML aux données d'application

• ng-model-options spécifie comment mettre à jour le modèle

• ng-mousedown spécifie le comportement lorsque le le bouton de la souris est enfoncé

• ng-mouseenter spécifie le comportement du pointeur de la souris lors du passage à travers l'élément

• ng-mouseleave Spécifie le comportement lorsque la souris le pointeur quitte l'élément

• ng-mousemove Spécifie le comportement du pointeur de la souris lorsqu'il quitte l'élément. Comportement lors d'un déplacement dans l'élément

• ng -mouseover spécifie le comportement lorsque le pointeur de la souris est sur l'élément

• ng-mouseup spécifie quand le pointeur de la souris est relâché sur l'élément Comportement lorsque le bouton de la souris est activé

• ng-non-bindable Spécifie que l'élément ou le sous-élément ne peut pas lier de données

• ng-open spécifie l'attribut ouvert de l'élément

• ng-options spécifie <select><options>

• ng-paste dans la liste

  pour spécifier le comportement de l'événement coller

• ng-pluralize Afficher les informations selon les règles de localisation

• ng-readonly Spécifier l'attribut en lecture seule de l'élément

• ng-repeat Définir le modèle pour chaque donnée de la collection

• ng-selected Spécifier l'attribut sélectionné de l'élément

• ng-show Afficher ou masquer le HTML Élément

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!