美文网首页我爱编程
AngularJS内置指令大全

AngularJS内置指令大全

作者: 阿羡吖 | 来源:发表于2018-03-02 15:38 被阅读0次

本篇转载于:http://blog.csdn.net/evankaka
AngularJs GitHub: https://github.com/angular/angular.js/
AngularJs下载地址:https://angularjs.org/
01、ng-model 将表单控件和当前作用域的属性进行绑定。需要注意绑定的scope的范围(父scope子scope)。
02、ng-init(用的比较少,该指令被调用时会初始化内部作用域。一般不建议使用)。
03、ng-app 这是必须的。该指令会自动启动一个AngularJS应用。ngapp指令指定的应用程序的根元素,通常放置在网页的根元素如body或html标签。
只有一个AngularJS应用可以自动引导每个HTML文档。第一ngapp找到该文件将定义自动引导的根元素的应用。运行多个应用程序在一个HTML文件,您必须手动引导他们使用angular.bootstrap。AngularJS应用不能互相嵌套。
你可以指定一个AngularJS模块被用于应用程序的根模块。该模块将被加载到应用程序时,引导到$injector对象中。它应该包含所需的应用程序代码,或依赖于将包含代码的其他模块的依赖关系。更多信息见angular.module。
04、ng-controller 用来定义一个控制器。
05、ng-form用来定义一个form,通常是用来验证参数,通常可以和以下标签一起使用;
ng-valid(有效的)
ng-invalid(无效的)
ng-pristine(原始,简介)
ng-dirty(脏的)
ng-subnitted(提交的)
06、ng-disabled 像这种只要出现则生效的属性,可以在AngularJS中通过表达式返回值true/false令其生效。禁用表单输入字段。
07、ng-readonly 通过表达式返回true/fasle将表单输入字段设置为未读。
08、ng-checked 设置是否选中复选框。其中ng-true-value="" ng-false-value="",可用来设置选中时或不选中时对应的值。
09、ng-selected<select>里面的<option>用的。
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差不多,但页面渲染慢是会被看到。
13、ng-bind ng-bind的行为和{{}}差不多,只是我们可以用这个指令来避免FOUC,也就是未渲染导致的闪烁。
14、ng-cloak ng-cloak也可以为我们解决FOUC。ng-cloak会将内部元素隐藏,直到路由调用对面的页面。
15、ng-if 如果ng-if中的表达式为false,则对应的元素整个会从DOM中移除而非隐藏,但审查元素时可以看到表达式变成注释了。
16、ng-switch ngSwitch指令包含ng-switch onng-switch-whenng-switch-default功能类似switch,ng-switch on指要判断的值,ng-switch-when指条件条件符合将显示整个dom元素,ng-switch-default指条件都不符合默认显示的元素。
17、ng-repeat 遍历集合(数组),给每个元素生成模板实例,每个实例的作用域中可以用一些特殊的属性;如下:
$index
$first
$last
$middle
even
18、ng-href在一个文本域中弄了个ng-model,然后像这样<a href="{{myUrl}}">在href里面写了进去。
19、ng-src 大同小异,即表达式生效前不要加载该资源。
20、ng-class 用作用域中的对象动态改变类样式。
21、ng-click 点击事件
22、ngKeyupngKeyDownngKeypress 键盘事件
23、ngMousedownngMouseenterngMouseleavengMousemovengMouseoverngMouseup 鼠标事件。
24、ngTrim 去除左右空格

相关文章

  • AngularJS内置指令大全

    本篇转载于:http://blog.csdn.net/evankakaAngularJs GitHub: http...

  • 15. Angular的内置指令(过滤器)

    AngularJS中自定义指令处理 以ng开头的指令都是内置指令。 内置指令是AngularJS已经处理,使用内置...

  • Angular

    AngularJS 通过 ng-directives(指令)扩展了HTML AngularJS 通过内置的指令来为...

  • AngularJS 指令

    AngularJS 指令 背景 什么是AngularJS指令? 一、内置指令 二、自定义 概念 模块对象app,提...

  • AngularJS指令-基础

    简介 AngularJS 通过被称为 指令 的新属性来扩展 HTML。AngularJS 通过内置的指令来为应用添...

  • AngularJS之指令

    AngularJS 通过被称为指令的新属性来扩展 HTML。AngularJS 通过内置的指令来为应用添加功能。当...

  • AngularJS 内置指令

    AngularJS 内置指令 凡是以 ng- 开始的都成为内置指令 用于表示一个angular应用, Angul...

  • AngularJS内置指令

    -- 列表 --基础ng属性指令 ng-href ng-src ng-disabled ng-checked ng...

  • Angular JS(1)

    1、表达式 2、内置指令 凡是以ng- 开始的,都称为内置指令ng-app 用于表示一个angularjs应用An...

  • Vue.js与其他框架的区别

    1.与AngularJS的区别 相同点: 都支持指令:内置指令和自定义指令。 都支持过滤器:内置过滤器和自定义过滤...

网友评论

    本文标题:AngularJS内置指令大全

    本文链接:https://www.haomeiwen.com/subject/mwnoxftx.html