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" 进行同步