文档章节

angularJS内置指令汇总

孟飞阳
 孟飞阳
发布于 2017/03/15 19:27
字数 1599
阅读 13
收藏 0

Directive components in ng

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 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.

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. The ngHref directive solves this problem.

ngSrc

Using 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.

ngSrcset

Using 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 ngSrcsetdirective solves this problem.

ngDisabled

This directive sets the disabled attribute on the element (typically a form control, e.g. inputbuttonselectetc.) if the expression inside ngDisabled evaluates to truthy.

ngChecked

Sets the checked attribute on the element, if the expression inside ngChecked is truthy.

ngReadonly

Sets the readonly attribute on the element, if the expression inside ngReadonly is truthy. Note that readonlyapplies only to input elements with specific types. See the input docs on MDN for more information.

ngSelected

Sets the selected attribute on the element, if the expression inside ngSelected is truthy.

ngOpen

Sets the open attribute on the element, if the expression inside ngOpen is truthy.

ngForm

Nestable 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.

form

Directive that instantiates FormController.

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 the input element.

input

HTML 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.

ngValue

Binds the given expression to the value of the element.

ngBind

The 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.

ngBindTemplate

The 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.

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 $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.

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

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

ngClassOdd

The ngClassOdd and ngClassEven directives work exactly as ngClass, except they work in conjunction with ngRepeat and take effect only on odd (even) rows.

ngClassEven

The ngClassOdd and ngClassEven directives work exactly as ngClass, except they work in conjunction with ngRepeat and take effect only on odd (even) rows.

ngCloak

The 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.

ngController

The 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.

ngCsp

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

ngClick

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

ngDblclick

The ngDblclick directive 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

The 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.

ngInclude

Fetches, compiles and includes an external HTML fragment.

ngInit

The ngInit directive 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 to ng-list=", ". You can specify a custom delimiter as the value of the ngList attribute - for example, ng-list=" | ".

ngModel

The ngModel directive binds an input,selecttextarea (or custom form control) to a property on the scope using NgModelController, which is created and exposed by this directive.

ngModelOptions

This 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.

ngNonBindable

The 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.

ngOptions

The 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.

ngRepeat

The 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.

ngShow

The ngShow directive shows or hides the given HTML element based on the expression provided to the ngShowattribute.

ngHide

The ngHide directive shows or hides the given HTML element based on the expression provided to the ngHideattribute.

ngStyle

The ngStyle directive allows you to set CSS style on an HTML element conditionally.

ngSwitch

The 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.

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 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.

select

HTML select element with AngularJS data-binding.

ngRequired

ngRequired adds the required validator to ngModel. It is most often used for input and select controls, but can also be applied to custom controls.

ngPattern

ngPattern 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.

ngMaxlength

ngMaxlength 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.

ngMinlength

ngMinlength 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

 

© 著作权归作者所有

共有 人打赏支持
孟飞阳
粉丝 212
博文 998
码字总数 550537
作品 5
朝阳
个人站长
私信 提问
《AngularJS学习整理》系列分享专栏

《AngularJS学习整理》系列分享专栏 《AngularJS学习整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201748.html 文章 教你用AngularJS框架一行JS代码实现...

开元中国2015
2018/11/09
0
0
OSChina 技术专题之 AngularJS 更新版(201412)

Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作。 AngularJS很小,只有60K,兼容主流浏...

OSC编辑部
2014/10/17
11.1K
26
开源中国的 AngularJS 优秀文章汇总

Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作。 AngularJS很小,只有60K,兼容主流浏...

oschina
2014/08/24
5.7K
13
推荐 15 个 Angular.js 应用扩展指令

几天前我们看到Angular 1.4.0发布了-一个以社团为驱动的发布版本涵盖了400多个GitHub的提交,增加了对特性的提升,比如动画,以及可用性。官方新闻发布稿覆盖了绝大部分,这同样值得放于官方...

oschina
2015/06/04
9.6K
16
Angular.js 相关记录

AngularJS作用域文档:http://docs.angularjs.org/api/ng.$rootScope.Scope ng-view 指令的角色是为当前路由把对应的视图模板载入到布局模板中。 AngularJS内置过滤器:http://code.angular...

彭博
2014/04/25
0
2

没有更多内容

加载失败,请刷新页面

加载更多

【git工具】git bash

添加别名命令 git bash 下添加 alias: windows 工具:git bash 下添加 alias 配置文件 \Git\etc\bash.bashrc 即可,在gitbash工具目录下的 etc目录下 如: 让git log 命令 简化成 gl,配置如...

echojson
26分钟前
0
0
为什么做java开发的公司需要那么多程序员?

透过现象看本质。 Java是企业应用市场的王者,如果一家非互联网公司用Java,那么十有八九是做企业应用的。 所以,这个问题本质上是:为什么做企业应用的公司需要那么多Java程序员。 开发企业...

老道士
28分钟前
3
0
Go Timer实现原理剖析

简介 快速使用 操作介绍

恋恋美食
48分钟前
2
0
记录一个奇怪的问题

环境:jdk1.8虚拟机参数:-verbose:gc -XX:+PrintGCDetails -Xmx20m -Xms20m -Xmn10m -XX:SurvivorRatio=8  -XX:+HeapDumpOnOutOfMemoryError 可以看出,eden占8M却放不下6M数据,发生了......

暗中观察
今天
3
0
rabbitmq安装教程

RabbitMQ有Windows与Linux版本的,这里先写Windows版本的安装。 以前安装软件总是在百度上找某某安装教程,结果能按照教程安装好的软件真的不多。想起先前以为大牛说的一句话,去官网按照官网...

em_aaron
今天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部