您的位置:首页 > Web前端 > AngularJS

angularJS内置指令汇总

2017-03-15 00:00 686 查看

Directive components in
ng

NameDescription
ngJqUse 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).
ngAppUse this directive to auto-bootstrap an AngularJS application. The
ngApp
directive designates the root element of the application and is typically placed near the root element of the page - e.g. on the
<body>
or
<html>
tags.
aModifies the default behavior of the html a tag so that the default action is prevented when the href attribute is empty.
ngHrefUsing 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. The
ngHref
directive solves this problem.
ngSrcUsing AngularJS markup like
{{hash}}
in a
src
attribute doesn't work right: The browser will fetch from the URL with the literal text
{{hash}}
until AngularJS replaces the expression inside
{{hash}}
. The
ngSrc
directive solves this problem.
ngSrcsetUsing AngularJS markup like
{{hash}}
in a
srcset
attribute doesn't work right: The browser will fetch from the URL with the literal text
{{hash}}
until AngularJS replaces the expression inside
{{hash}}
. The
ngSrcset
directive solves this problem.
ngDisabledThis directive sets the
disabled
attribute on the element (typically a form control, e.g.
input
,
button
,
select
etc.) if the expression inside
ngDisabled
evaluates to truthy.
ngCheckedSets the
checked
attribute on the element, if the expression inside
ngChecked
is truthy.
ngReadonlySets the
readonly
attribute on the element, if the expression inside
ngReadonly
is truthy. Note that
readonly
applies only to
input
elements with specific types. See the input docs on MDN for more information.
ngSelectedSets the
selected
attribute on the element, if the expression inside
ngSelected
is truthy.
ngOpenSets the
open
attribute on the element, if the expression inside
ngOpen
is truthy.
ngFormNestable alias of
form
directive. 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.
formDirective that instantiates FormController.
textareaHTML textarea element control with AngularJS data-binding. The data-binding and validation properties of this element are exactly the same as those of the input element.
inputHTML input element control. When used together with
ngModel
, it provides data-binding, input state control, and validation. Input control follows HTML5 input types and polyfills the HTML5 validation behavior for older browsers.
ngValueBinds the given expression to the value of the element.
ngBindThe
ngBind
attribute 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.
ngBindTemplateThe
ngBindTemplate
directive specifies that the element text content should be replaced with the interpolation of the template in the
ngBindTemplate
attribute. Unlike
ngBind
, the
ngBindTemplate
can contain multiple
{{
}}
expressions. This directive is needed since some HTML elements (such as TITLE and OPTION) cannot contain SPAN elements.
ngBindHtmlEvaluates 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 $sanitize service. To utilize this functionality, ensure that
$sanitize
is available, for example, by including
ngSanitize
in your module's dependencies (not in core AngularJS). In order to use
ngSanitize
in your module's dependencies, you need to include "angular-sanitize.js" in your application.
ngChangeEvaluate 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).
ngClassThe
ngClass
directive allows you to dynamically set CSS classes on an HTML element by databinding an expression that represents all classes to be added.
ngClassOddThe
ngClassOdd
and
ngClassEven
directives work exactly as ngClass, except they work in conjunction with
ngRepeat
and take effect only on odd (even) rows.
ngClassEvenThe
ngClassOdd
and
ngClassEven
directives work exactly as ngClass, except they work in conjunction with
ngRepeat
and take effect only on odd (even) rows.
ngCloakThe
ngCloak
directive 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.
ngControllerThe
ngController
directive 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.
ngCspAngularJS has some features that can conflict with certain restrictions that are applied when using CSP (Content Security Policy) rules.
ngClickThe ngClick directive allows you to specify custom behavior when an element is clicked.
ngDblclickThe
ngDblclick
directive allows you to specify custom behavior on a dblclick event.
ngMousedownThe ngMousedown directive allows you to specify custom behavior on mousedown event.
ngMouseupSpecify custom behavior on mouseup event.
ngMouseoverSpecify custom behavior on mouseover event.
ngMouseenterSpecify custom behavior on mouseenter event.
ngMouseleaveSpecify custom behavior on mouseleave event.
ngMousemoveSpecify custom behavior on mousemove event.
ngKeydownSpecify custom behavior on keydown event.
ngKeyupSpecify custom behavior on keyup event.
ngKeypressSpecify custom behavior on keypress event.
ngSubmitEnables binding AngularJS expressions to onsubmit events.
ngFocusSpecify custom behavior on focus event.
ngBlurSpecify custom behavior on blur event.
ngCopySpecify custom behavior on copy event.
ngCutSpecify custom behavior on cut event.
ngPasteSpecify custom behavior on paste event.
ngIfThe
ngIf
directive removes or recreates a portion of the DOM tree based on an {expression}. If the expression assigned to
ngIf
evaluates to a false value then the element is removed from the DOM, otherwise a clone of the element is reinserted into the DOM.
ngIncludeFetches, compiles and includes an external HTML fragment.
ngInitThe
ngInit
directive allows you to evaluate an expression in the current scope.
ngListText input that converts between a delimited string and an array of strings. The default delimiter is a comma followed by a space - equivalent to
ng-list=", "
. You can specify a custom delimiter as the value of the
ngList
attribute - for example,
ng-list=" | "
.
ngModelThe
ngModel
directive binds an
input
,
select
,
textarea
(or custom form control) to a property on the scope using NgModelController, which is created and exposed by this directive.
ngModelOptionsThis directive allows you to modify the behaviour of
ngModel
directives within your application. You can specify an
ngModelOptions
directive on any element. All
ngModel
directives will use the options of their nearest
ngModelOptions
ancestor.
ngNonBindableThe
ngNonBindable
directive 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.
ngOptionsThe
ngOptions
attribute can be used to dynamically generate a list of
<option>
elements for the
<select>
element using the array or object obtained by evaluating the
ngOptions
comprehension expression.
ngPluralize
ngPluralize
is a directive that displays messages according to en-US localization rules. These rules are bundled with angular.js, but can be overridden (see AngularJS i18n dev guide). You configure ngPluralize directive by specifying the mappings between plural categories and the strings to be displayed.
ngRepeatThe
ngRepeat
directive 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
$index
is set to the item index or key.
ngShowThe
ngShow
directive shows or hides the given HTML element based on the expression provided to the
ngShow
attribute.
ngHideThe
ngHide
directive shows or hides the given HTML element based on the expression provided to the
ngHide
attribute.
ngStyleThe
ngStyle
directive allows you to set CSS style on an HTML element conditionally.
ngSwitchThe
ngSwitch
directive is used to conditionally swap DOM structure on your template based on a scope expression. Elements within
ngSwitch
but without
ngSwitchWhen
or
ngSwitchDefault
directives will be preserved at the location as specified in the template.
ngTranscludeDirective that marks the insertion point for the transcluded DOM of the nearest parent directive that uses transclusion.
scriptLoad the content of a
<script>
element into
$templateCache
, so that the template can be used by
ngInclude
,
ngView
, or directives. The type of the
<script>
element must be specified as
text/ng-template
, and a cache name for the template must be assigned through the element's
id
, which can then be used as a directive's
templateUrl
.
selectHTML
select
element with AngularJS data-binding.
ngRequiredngRequired adds the required
validator
to
ngModel
. It is most often used for
input
and
select
controls, but can also be applied to custom controls.
ngPatternngPattern adds the pattern
validator
to
ngModel
. It is most often used for text-based
input
controls, but can also be applied to custom text-based controls.
ngMaxlengthngMaxlength adds the maxlength
validator
to
ngModel
. It is most often used for text-based
input
controls, but can also be applied to custom text-based controls.
ngMinlengthngMinlength adds the minlength
validator
to
ngModel
. It is most often used for text-based
input
controls, but can also be applied to custom text-based controls.
地址:https://docs.angularjs.org/api/ng/directive
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  AngularJS