What are the differences between angularjs and angular directive writing? An introduction to the differences between AngularJs and Angular's ​​commonly used instruction writing methods

This article mainly introduces to you the difference between angularjs and angular’s ​​commonly used instruction writing methods. Although the difference is not big, there is still a difference, and we must take it seriously. Let’s take a look at this article together

1: angularjs directive

1.ng-bind

Replace the content of the HTML element using the value of the given variable or expression

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

2.ng-blur

Required when the HTML element loses focus Executed functions (<a>, <input>, <select>, <textarea>supported)

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

3.ng-checked/ng-disabled

ng-checked sets the checked attribute of the checkbox (checkbox) or radio button (radio)
If the ng-disabled expression returns true, the form field will be disabled (<input>, <select>, or <textarea>)

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

//flag为布尔类型

4.ng-class

Dynamicly bind one or more CSS classes to HTML elements.

//写法一
<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 defines the root element of the application.

• ng-bind Binds HTML elements to application data

• ng-bind-html Binds innerHTML of HTML elements to application data , and remove dangerous characters in HTML strings

• ng-bind-template Specifies the text content to be replaced with a template

• ng-blur Specifies the behavior of the blur event

• ng-change Specifies the expression to be executed when the content changes

• ng-checked Specifies whether the element is selected

• ng-class Specifies the CSS class used by HTML elements

• ng-class-even Similar to ng-class, but only starts on even lines Function

• ng-class-odd Similar to ng-class, but only works in odd rows

• ng-click Defines when the element is clicked Behavior

• ng-cloak Prevents the application from flickering when it is about to load

• ng-controller Defines the application's controller object

• ng-copy Specifies the behavior of copy events

• ng-csp Modifies the security policy of content

• ng -cut Specifies the behavior of the cut event

• ##ng-dblclick Specifies the behavior of the double-click event

• ng-disabled Specifies whether an element is disabled

• ng-focus Specifies the behavior of focus events

• ng-form Specifies the HTML form to inherit the controller form

• ng-hide Hide or show HTML elements

• ng-href Specify links for the

  <a> elements

• ng-if If the condition is false, remove the HTML element

• ng-include Include the HTML file in the application

• ng-init Define the initialization value of the application

• ng-jq Define the library that the application must use, such as: jQuery

##ng-keydown Specify the key to press Event behavior
ng-keypress Specifies the behavior of the key press event
ng-keyup Specifies the behavior of the key release event
ng-list Convert text to list (array)

• ##ng-model Bind the value of HTML controller to application data

• ng-model-options Specifies how to update the model

• ng-mousedown Specifies the behavior when the mouse button is pressed

• ng-mouseenter Specifies the behavior when the mouse pointer passes through the element

• ng-mouseleave Specifies the behavior when the mouse pointer leaves the element

• ng- mousemove Specifies the behavior of the mouse pointer when moving within the specified element

• ##ng-mouseover Specifies the behavior of the mouse pointer when it is located above the element

• ng- mouseup specifies the behavior when the mouse button is released on the element

• ng-non-bindable specifies that the element or sub-element cannot bind data

• ng-open Specify the open attribute of the element

• ng-options Specify

## in the
• <select>

  list #ng-paste Specifies the behavior of paste events

• ng-pluralize Displays information according to localization rules

• ng-readonly Specifies the readonly attribute of the element

• ng-repeat Defines the template for each data in the collection

• ng-selected Specifies the element's selected attribute

• ng-show Show or hide HTML elements

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

The above is the detailed content of What are the differences between angularjs and angular directive writing? An introduction to the differences between AngularJs and Angular's ​​commonly used instruction writing methods. For more information, please follow other related articles on the PHP Chinese website!