微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

angularJS内置指令汇总

Directive components inng

Name Description
ngJq

Use this directive to force the angular.element library. This should be used to force either jqLite by leaving ng-jq blank or setting the name of the jquery variable under window (eg. jQuery).

ngApp

Use this directive toauto-bootstrapan AngularJS application. ThengAppdirective designates theroot elementof the application and is typically placed near the root element of the page - e.g. on the<body>or<html>tags.

a

Modifies the default behavior of the html a tag so that the default action is prevented when the href attribute is empty.

ngHref

Using AngularJS markup like{{hash}}in an href attribute will make the link go to the wrong URL if the user clicks it before AngularJS has a chance to replace the{{hash}}markup with its value. Until AngularJS replaces the markup the link will be broken and will most likely return a 404 error. ThengHrefdirective solves this problem.

ngSrc

Using AngularJS markup like{{hash}}in asrcattribute doesn't work right: The browser will fetch from the URL with the literal text{{hash}}until AngularJS replaces the expression inside{{hash}}. ThengSrcdirective solves this problem.

ngSrcset

Using AngularJS markup like{{hash}}in asrcsetattribute doesn't work right: The browser will fetch from the URL with the literal text{{hash}}until AngularJS replaces the expression inside{{hash}}. ThengSrcsetdirective solves this problem.

ngDisabled

This directive sets thedisabledattribute on the element (typically a form control,e.g.input,button,selectetc.) if theexpressioninsidengdisabledevaluates to truthy.

ngChecked

Sets thecheckedattribute on the element,if the expression insidengCheckedis truthy.

ngReadonly

Sets thereadonlyattribute on the element,if the expression insidengReadonlyis truthy. Note thatreadonlyapplies only toinputelements with specific types.See the input docs on MDNfor more information.

ngSelected

Sets theselectedattribute on the element,if the expression insidengSelectedis truthy.

ngOpen

Sets theopenattribute on the element,if the expression insidengOpenis truthy.

ngForm

nestable alias offormdirective. HTML does not allow nesting of form elements. It is useful to nest forms,for example if the validity of a sub-group of controls needs to be determined.

form

Directive that instantiatesFormController.

textarea

HTML textarea element control with AngularJS data-binding. The data-binding and validation properties of this element are exactly the same as those of theinput element.

input

HTML input element control. When used together withngModel,it provides data-binding,input state control,and validation. Input control follows HTML5 input types and polyfills the HTML5 validation behavior for older browsers.

ngValue

Binds the given expression to the value of the element.

ngBind

ThengBindattribute tells AngularJS to replace the text content of the specified HTML element with the value of a given expression,and to update the text content when the value of that expression changes.

ngBindTemplate

ThengBindTemplatedirective specifies that the element text content should be replaced with the interpolation of the template in thengBindTemplateattribute. UnlikengBind,thengBindTemplatecan contain multiple{{}}expressions. This directive is needed since some HTML elements (such as TITLE and OPTION) cannot contain SPAN elements.

ngBindHtml

Evaluates the expression and inserts the resulting HTML into the element in a secure way. By default,the resulting HTML content will be sanitized using the$sanitizeservice. To utilize this functionality,ensure that$sanitizeis available,for example,by includingngSanitizein your module's dependencies (not in core AngularJS). In order to usengSanitizein your module's dependencies,you need to include "angular-sanitize.js" in your application.

ngChange

Evaluate the given expression when the user changes the input. The expression is evaluated immediately,unlike the JavaScript onchange event which only triggers at the end of a change (usually,when the user leaves the form element or presses the return key).

ngClass

ThengClassdirective allows you to dynamically set CSS classes on an HTML element by databinding an expression that represents all classes to be added.

ngClassOdd

ThengClassOddandngClassEvendirectives work exactly asngClass,except they work in conjunction withngRepeatand take effect only on odd (even) rows.

ngClassEven

ThengClassOddandngClassEvendirectives work exactly asngClass,except they work in conjunction withngRepeatand take effect only on odd (even) rows.

ngCloak

ThengCloakdirective is used to prevent the AngularJS html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading. Use this directive to avoid the undesirable flicker effect caused by the html template display.

ngController

ThengControllerdirective attaches a controller class to the view. This is a key aspect of how angular supports the principles behind the Model-View-Controller design pattern.

ngCsp

AngularJS has some features that can conflict with certain restrictions that are applied when usingCSP (Content Security Policy)rules.

ngClick

The ngClick directive allows you to specify custom behavior when an element is clicked.

ngDblclick

ThengDblclickdirective allows you to specify custom behavior on a dblclick event.

ngMousedown

The ngMousedown directive allows you to specify custom behavior on mousedown event.

ngMouseup

Specify custom behavior on mouseup event.

ngMouseover

Specify custom behavior on mouSEOver event.

ngMouseenter

Specify custom behavior on mouseenter event.

ngMouseleave

Specify custom behavior on mouseleave event.

ngMousemove

Specify custom behavior on mousemove event.

ngKeydown

Specify custom behavior on keydown event.

ngKeyup

Specify custom behavior on keyup event.

ngKeypress

Specify custom behavior on keypress event.

ngSubmit

Enables binding AngularJS expressions to onsubmit events.

ngFocus

Specify custom behavior on focus event.

ngBlur

Specify custom behavior on blur event.

ngCopy

Specify custom behavior on copy event.

ngCut

Specify custom behavior on cut event.

ngPaste

Specify custom behavior on paste event.

ngIf

ThengIfdirective removes or recreates a portion of the DOM tree based on an {expression}. If the expression assigned tongIfevaluates to a false value then the element is removed from the DOM,otherwise a clone of the element is reinserted into the DOM.

ngInclude

Fetches,compiles and includes an external HTML fragment.

ngInit

ThengInitdirective allows you to evaluate an expression in the current scope.

ngList

Text input that converts between a delimited string and an array of strings. The default delimiter is a comma followed by a space - equivalent tong-list=",". You can specify a custom delimiter as the value of thengListattribute - for example,ng-list=" | ".

ngModel

ThengModeldirective binds aninput,select,textarea(or custom form control) to a property on the scope usingNgModelController,which is created and exposed by this directive.

ngModelOptions

This directive allows you to modify the behavIoUr ofngModeldirectives within your application. You can specify anngModelOptionsdirective on any element. AllngModeldirectives will use the options of their nearestngModelOptionsancestor.

ngNonBindable

ThengNonBindabledirective tells AngularJS not to compile or bind the contents of the current DOM element. This is useful if the element contains what appears to be AngularJS directives and bindings but which should be ignored by AngularJS. This Could be the case if you have a site that displays snippets of code,for instance.

ngOptions

ThengOptionsattribute can be used to dynamically generate a list of<option>elements for the<select>element using the array or object obtained by evaluating thengOptionscomprehension expression.

ngPluralize

ngpluralizeis a directive that displays messages according to en-US localization rules. These rules are bundled with angular.js,but can be overridden (seeAngularJS i18ndev guide). You configure ngpluralize directive by specifying the mappings betweenplural categoriesand the strings to be displayed.

ngRepeat

ThengRepeatdirective instantiates a template once per item from a collection. Each template instance gets its own scope,where the given loop variable is set to the current collection item,and$indexis set to the item index or key.

ngShow

ThengShowdirective shows or hides the given HTML element based on the expression provided to thengShowattribute.

ngHide

ThengHidedirective shows or hides the given HTML element based on the expression provided to thengHideattribute.

ngStyle

ThengStyledirective allows you to set CSS style on an HTML element conditionally.

ngSwitch

ThengSwitchdirective is used to conditionally swap DOM structure on your template based on a scope expression. Elements withinngSwitchbut withoutngSwitchWhenorngSwitchDefaultdirectives will be preserved at the location as specified in the template.

ngTransclude

Directive that marks the insertion point for the transcluded DOM of the nearest parent directive that uses transclusion.

script

Load the content of a<script>element into$templateCache,so that the template can be used byngInclude,ngView,ordirectives. The type of the<script>element must be specified astext/ng-template,and a cache name for the template must be assigned through the element'sid,which can then be used as a directive'stemplateUrl.

select

HTMLselectelement with AngularJS data-binding.

ngRequired

ngrequired adds the requiredvalidatortongModel. It is most often used forinputandselectcontrols,but can also be applied to custom controls.

ngPattern

ngPattern adds the patternvalidatortongModel. It is most often used for text-basedinputcontrols,but can also be applied to custom text-based controls.

ngMaxlength

ngMaxlength adds the maxlengthvalidatortongModel. It is most often used for text-basedinputcontrols,but can also be applied to custom text-based controls.

ngMinlength

ngMinlength adds the minlengthvalidatortongModel. It is most often used for text-basedinputcontrols,but can also be applied to custom text-based controls.

地址:https://docs.angularjs.org/api/ng/directive

原文地址:https://www.jb51.cc/angularjs/147807.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐