脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-AngularJs内置指令大全，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

AngularJs内置指令大全

AngularJs GITHub:https://github.COM/angular/Angular.js/

AngularJs下载地址：https://angularjs.org/

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 遍历集合(数组)，给每个元素生成模板实例，每个实例的作用域中可以用一些特殊属性，如下 ="user in data"> 　　　　$index: 表示当前item的索引, 　　　　$First: 如果item为第一个，那么$first为true , 　　　　$middle: 如果item不是开头，不是结尾$middle为true, 　　　　$last: 如果item是最后一个， $last为true, 　　　　$even: 如果索引为偶数， 那么$even为true,否则为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就只是设置值而已 不双向绑定数据

觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-AngularJs内置指令大全全部内容，希望文章能够帮你解决javascript代码实例教程-AngularJs内置指令大全所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。