AngularJs内置指令大全_ng dirty-程序员宅基地

技术标签: angular  指令  Angular  

1、ng-model
这个大家都非常熟悉了,就是将表单控件和当前作用域的属性进行绑定。需要注意绑定的scope的范围(父scope与子scope)。
ng-model主要绑定的元素包括input, select, textarea
ng-model的元素都有ng-valid(可用),ng-invalid 不可用
ng-pristine(用户为对这个元素进行操作过), ng-dirty(元素的模型发生改变的话)属性; 这几个属性都是布尔值;

2、ng-init
用得比较少,该指令被调用时会初始化内部作用域。一般不建议使用此参数。

3、ng-app
• 这个是必需的。使用该指令自动启动一个AngularJS应用。
• ngapp指令指定的应用程序的根元素,通常放置在网页的根元素如body或html 标签。
• 只有一个AngularJS应用可以自动引导每个HTML文档。
• 第一ngapp找到该文件将定义自动引导的根元素的应用。
• 运行多个应用程序在一个HTML文件,您必须手动引导他们使用angular.bootstrap。
• AngularJS应用不能互相嵌套。
• 你可以指定一个AngularJS模块被用于应用程序的根模块。
• 该模块将被加载到应用程序时,引导到$injector对象中。
• 它应该包含所需的应用程序代码,或依赖于将包含代码的其他模块的依赖关系。
• 更多信息见angular.module。

4、ng-controller
这个也是经常用到的,用来定义一个控制器。注意格式

5、ng-form用来定义一个from,通常是用来验证参数。通常可以和以下标签一起使用
ng-valid (有效的).
ng-invalid (无效的).
ng-pristine (原始,简介).
ng-dirty (脏的).
ng-submitted (提交的)

6、ng-disabled
像这种只要出现则生效的属性,我们可以在AngularJS中通过表达式返回值true/false令其生效。禁用表单输入字段。

7、ng-readonly
通过表达式返回值true/false将表单输入字段设为只读。

8、ng-checked
设置是否选中复选框。其中 ng-true-value=””” ng-false-value=”””,可用来设置选中时或不选中时对应的值

9、ng-selected
给里面的用的

10、ng-show/ng-hide
根据表达式显示/隐藏HTML元素,注意是隐藏,不是从DOM移除(ng-if才是移除),对于大对象的DOM,可以用它,但如果是小对象的DOM,建议使用ng-if

11、ng-change
不是HTML那套onXXX之类的,而是ng-XXX。用来设置input/select等内容发生变化时的事件

12、{ {}}
其实这个也是一个指令,也许觉得和ng-bind差不多,但页面渲染略慢时可能会被看到。另外,{ {}}的performance远不如ng-bind,只是用起来很方便。

13、ng-bind
ng-bind的行为和{ {}}差不多,只是我们可以用这个指令来避免FOUC(Flash Of Unrendered Content),也就是未渲染导致的闪烁。
ng-bind-template指令
这个指令跟ng-bind 差不多
ng-bind是指替换元素的textContent为ng-bind的值
ng-bind-template是指替换元素的textContent的值为ng-bind-template经过angular.parse().assign的内容;

14、ng-cloak
ng-cloak也可以为我们解决FOUC。 ng-cloak会将内部元素隐藏,直到路由调用对应的页面。

FOUC :文档样式短暂失效
如果使用import方法对CSS进行导入,
会导致某些页面在Windows 下的Internet Explorer出现一些奇怪的现象:
以无样式显示页面内容的瞬间闪烁,这种现象称之为文档样式短暂失效(Flash of Unstyled Content)
存在完全是为了用户体验,
如果一个html界面angular.js还没加载进来,
那么界面会有{ {}}这样的标志,如果{ {}}标志多了,用户会一脸蒙蔽 啊,
ng-cloak如果加在根节点,那么界面的{ {}}会被隐藏,等到{ {}}完全编译成动态数据的时候界面才可见;

15、ng-if
如果ng-if中的表达式为false,则对应的元素整个会从DOM中移除而非隐藏,但审查元素时你可以看到表达式变成注释了。如果相进行隐藏,可以使用ng-hide。
16、ng-switch
ngSwitch指令包含ng-switch on、ng-switch-when、ng-switch-default功能类似switch,ng-switch on指要判断的值,ng-switch-when指条件条件符
合将显示这个dom元素, ng-switch-default指条件都不符合默认显示的元素。
17、ng-repeat
遍历集合(数组),给每个元素生成模板实例,每个实例的作用域中可以用一些特殊属性,如下


    • index:item, first : 如果item为第一个,那么 firsttrue, middle : 如果item不是开头,不是结尾 middletrue, last : 如果item是最后一个, lasttrue, even : 如果索引为偶数, 那么 eventrue,false odd : 同上, 索引为奇数$odd为true….;
      18、ng-href
      起初我在一个文本域中弄了个ng-model,然后像这样 在href里面写了进去。

19、ng-src
大同小异,即表达式生效前不要加载该资源。
界面加载的时候才不管img的标签src有什么
都会一并加载
如果图片的src包含了{ { **}}这些字符
浏览器不会管这是什么东西
在渲染dom树的时候
会直接请求这个地址
如果想通过{ { **}}动态生成img标签的src,不要用src,要用ng-src

20、ng-class
用作用域中的对象动态改变类样式, 通过一个表达式 来判断什么情况下 用什么样式

21、ng-click
点击事件
ng-click=event()
$scope.event=function(){}

22、ngKeyup
键盘事件

23、ngKeydown
键盘事件

24、ngKeypress
键盘事件

25、ngMousedown、ngMouseenter、ngMouseleave、ngMousemove、ngMouseover、ngMouseup
鼠标事件

26、ngTrim
去除左右空格

27、ngInclude
ng-include指令是指这个指令标签的innerHTML为指定的url
这个url为相对与当前目录的url地址或者绝对地址
angular会通过ajax请求该地址
然后把地址的内容作为指令元素innerHTML填充;

28、ngIist
ng-list这个指令要和ng-model合起来用
ng-list在输入框的表现通过split(“,”)的数组才是实际的model
ng-list默认为”,”逗号
要设置成自定义的区分符,直接为ng-list赋值即可;

29、ngPattren
匹配这个输入框的输入值是否符合这个正则,如果不匹配,这个元素会被加上ng-invalid的class, 如果匹配会被加上ng-valid的class

30、ng-paste ng-copy ng-cut
他们是一伙的,如果输入框的值是粘帖的,那么ng-paste就为真, ng-copy,ng-cut也是同理

31、ng-non-bindable
ng-non-bindable指令指该元素的内部{ { **}}不被绑定和转义,不受angular的掌控:

32、ng-open
这个我也认为和ng-open, ng-hide差不多, 区别是ng-open只能绑定details元素,(details标签目前只有webkit浏览器支持)
当ng-open的值为open那么绑定的details内部的summary元素就显示

33、input里的一些属性
ngMinLength,,ngMaxLength,ng-parttern,通过正则判断input是否匹配,ngChange,
ng-vlaue就只是设置值而已 不双向绑定数据

转自 http://blog.csdn.net/qq_35759390/article/details/65446049

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/fenxinzi557/article/details/79021962

智能推荐

看解放军练车,想想自己的技术也该提高下了。-程序员宅基地

文章浏览阅读1.9k次。视频: : 驾校都弱暴了 看看解放军是怎么练车的 http://v.youku.com/v_show/id_XNTYxMzYxNTMy.html 同时找到一个很好听的歌曲: http://music.baidu.com/search?key=%E6%9C%80%E5%90%8E%E4%B8%80%E6%AC%A1%E9%80%89%E6%8B%A9%E6%AD%8C%E8%AF%8D想

Debezium系列之第100篇文章:阶段性详细总结对Debezium使用方式的优化,详细介绍对Debezium集群和Kafka集群做的一系列优化_debezium oracle kafka配置优化-程序员宅基地

文章浏览阅读681次。Debezium系列之第100篇文章:阶段性详细总结对Debezium使用方式的优化,同时优化Kafka集群和Debezium集群_debezium oracle kafka配置优化

旷视产品营销总监吕盟:构建AIoT时代的城市智慧|量子位沙龙回顾-程序员宅基地

文章浏览阅读465次。4月10日,量子位与中关村壹号联合主办的AI+线下沙龙—智慧城市的发展趋势与挑战在中关村壹号举办。旷视产品营销总监吕盟、明略科技COO兼数字城市发展部总经理唐日新、思必驰..._产品营销总监

Java并发编程 - 第三章 Java内存模型_数据依赖分为-程序员宅基地

文章浏览阅读1.3w次。前言:Java 线程之间的通信对程序员完全透明,内存可见性问题很容易困扰 Java 程序员,本章将揭开 Java 内存模型神秘的面纱。一、Java 内存模型的基础1.1 并发编程模型的两个关键问题在并发编程中,需要处理两个关键问题:线程之间如何通信及线程之间如何同步(这里的线程是指并发执行的活动实体)。通信是指线程之间以何种机制来交换信息。在命令式编程中,线程之间的通信机制有两种:共享内存和消息传递。在共享内存的并发模型里,线程之间共享程序的公共状态,通过写-读内存中的公共状态进行隐式通信。在消息_数据依赖分为

sync___fast_iob-程序员宅基地

文章浏览阅读4.6k次。1. linux下sync命令在busybox-1.14.3中sync命令相关代码非常简单,int sync_main(int argc, char **argv UNUSED_PARAM){ /* coreutils-6.9 compat */ bb_warn_ignoring_args(argc - 1);___fast_iob

python pandas常用函数_python:pandas常用功能函数操作-程序员宅基地

文章浏览阅读306次。一、安装pandas创建虚拟环境:#创建虚拟环境mkvirtualenv -p python3 pandas_env#进入虚拟环境workon pandas_env安装pandas# 1、安装包$ pip install pandas测试# 2、进入python的交互式界面$ python -i# 3、使用Pandas>>> import pandas as pd>>..._print(df)

随便推点

前端如何拥有自己的服务器-程序员宅基地

文章浏览阅读7.3k次,点赞9次,收藏25次。本文来自作者 郭方超 在 GitChat 上分享 「前端如何拥有自己的服务器」,「阅读原文」查看交流实录。「文末高能」编辑 | 哈比前言前端开发者需要一直关注浏览器的行为和表现。时间长了免不了要接触到后端的知识、服务器的知识。尤其是在前端技术爆发式发展的当下,前端慢慢的渗透到了更多的领域。比如,使用 express/koa 创建 http 服务,使用 React-Native 开发 Android_前端怎么把项目放到自己的服务器上

qt5.8+vs2015使用Qt5WebEngine搭建环境_qt qt5webengine.lib-程序员宅基地

文章浏览阅读4.1k次。1.项目属性,C/C++,所有选项,附加包含目录新增、$(QTDIR)\include\QtWebEngineWidgets2.项目属性,连接器,输入,新增Qt5WebEngine.libQt5WebEngineWidgets.libQt5WebChannel.lib_qt qt5webengine.lib

测度论与概率论笔记5:测度空间上的积分(下)_lebesgue-stieltjes积分-程序员宅基地

文章浏览阅读1.7k次。内容摘要:1. Lebesgue积分和Lebesgue-Stietjes积分 2. 随机变量期望的严格定义与计算_lebesgue-stieltjes积分

CodeForces入门-程序员宅基地

文章浏览阅读5.1k次,点赞2次,收藏17次。codeforces的正确打开方式https://www.cnblogs.com/muzu/p/7616746.html1.背景可能很多人都久闻codeforces网站的大名,却苦于各种各样的区域性问题或玄学问题,没能真正地体验到cf所带来的极致魅力而网络上关于这方面的博文太少了(至少我没找到过),于是就写了这样的一篇博文2.关于codeforces...

algorithm头文件函数全集——史上最全,最贴心-程序员宅基地

文章浏览阅读7.3w次,点赞816次,收藏3.7k次。  不知大家可否遇到这种情况:一道题想出思路后,一般都习惯性的百度一下有没有“现成的函数”可以调用,往往收获不菲,增长很多奇奇怪怪的知识。而这些“现成的函数”大部分都来自于algorithm头文件。简直是我等懒癌的福音啊!  当然,也有很多朋友喜欢自己写函数。因人而异吧,哈哈  为了更方便、易懂, 笔者将每个函数的用法都注释在了代码中,想要验证或加深印象直接复制到编译器里就可以运行。代码:..._algorithm头文件

眼底视网膜血管增强方法(四)Frangi滤波_3d frangi参数-程序员宅基地

文章浏览阅读1.1w次,点赞6次,收藏55次。眼底视网膜血管增强方法(四)Frangi滤波Frangi1滤波是Frangi在1998年,运算Hessian矩阵的特征值构造出了一种滤波器来增强血管结构。Hessian矩阵实际是一个二阶偏导矩阵,矩阵的特征向量在图像边缘检测方面有着重要的作用。_3d frangi参数

推荐文章

热门文章

相关标签