angular常用指令

简介:AngularJS 是一个 JavaScript 框架,通过 <script> 标签添加到 HTML 页面

例如:

<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>

通过表达式绑定数据到 HTML

AngularJS 指令:

(参考网址:http://www.runoob.com/angularjs/angularjs-reference.html)

以 ng 作为前缀的 HTML 属性:

(1)ng-directives 扩展了 HTML

(2)ng-app 指令定义一个 AngularJS 应用程序的根元素,一个网页可以包含多个运行在不同元素中的 AngularJS 应用程序,在网页加载完毕时会自动引导(自动初始化)应用程序

(3)ng-model 指令把html元素(比如输入域的值)绑定到应用程序

(扩展)ng-model 指令作用:

    ①为应用程序数据提供类型验证(number、email、required)

    ②为应用程序数据提供状态(invalid、dirty、touched、error)

    ③为 HTML 元素提供 CSS 类

    ④绑定 HTML 元素到 HTML 表单

(4)ng-bind 指令把应用程序数据绑定到 HTML 视图

(5)ng-init 指令初始化AngularJS应用程序变量,为应用程序定义了初始值.通常情况下,不使用 ng-init,使用一个控制器或模块来代替它

(6)ng-controller 定义了控制器

(7)ng-bind绑定HTML元素到应用程序数据,

<element ng-bind="expression"></element>
// 或作为 CSS 类:
<element class="ng-bind: expression"></element>

(8)ng-repeat 指令会重复一个HTML元素,遍历数组对象

(9)创建自定义的指令,使用 .directive 函数来添加自定义的指令,要调用自定义指令,HTML 元素上需要添加自定义指令名

使用驼峰法来命名一个指令, 例如runoobDirective, 但在使用它时需要以 - 分割.可以通过以下方式来调用指令:元素名,属性,类名,注释

(10)ng-if 指令用于在表达式为 false 时移除 HTML 元素,若为true,会添加移除元素,并显示.语法<div ng-if="expression"></div>

(11) ng-hide 隐藏元素,而ng-if 是从 DOM 中移除元素

 (AngularJS 模块(Module) 定义了 AngularJS 应用

AngularJS 控制器(Controller) 用于控制 AngularJS 应用

ng-app指令定义了应用, ng-controller 定义了控制器)

 angularjs作用:

把应用程序数据绑定到 HTML 元素

克隆和重复 HTML 元素

隐藏和显示 HTML 元素

在 HTML 元素"背后"添加代码

支持输入验证

AngularJS表达式可以包含字母,操作符,变量;可以写在 HTML 中;不支持条件判断,循环及异常;支持过滤器

数据绑定:

{{ firstName }} 表达式是一个 AngularJS 数据绑定表达式

AngularJS 中的数据绑定,同步了 AngularJS 表达式与 AngularJS 数据

{{ firstName }} 是通过 ng-model="firstName" 进行同步

相关推荐