重温AngularJS（一）-- 表达式、指令

关联目录索引：
重温AngularJS（一）-- 表达式、指令
重温AngularJS（二）-- 模型ng-model指令
重温AngularJS（三）-- Scope(作用域)
重温AngularJS（四）-- 控制器ng-controller
重温AngularJS（五）-- 过滤器
重温AngularJS（六）-- 服务Service
重温AngularJS（七）-- Select(选择框)、表格
重温AngularJS（八）-- 事件
重温AngularJS（九）-- 模块、全局API
重温AngularJS（十）-- 表单、输入验证
重温AngularJS（十一）-- 包含、动画
重温AngularJS（十二）-- 依赖注入（5个核心组件）
重温AngularJS（十三）-- 路由

作者：Zyao89；转载请保留此行，谢谢；

AngularJS 简介

AngularJS 是一个 JavaScript 框架。它可通过

各个 angular.js 版本下载： https://github.com/angular/angular.js/releases

AngularJS 表达式

AngularJS 表达式写在双大括号内：{{ expression }}。
AngularJS 表达式把数据绑定到 HTML，这与 ng-bind 指令有异曲同工之妙。
AngularJS 将在表达式书写的位置"输出"数据。
AngularJS 表达式很像 JavaScript 表达式：它们可以包含文字、运算符和变量。

AngularJS 数字


 
总价： {{ quantity * cost }}

使用 ng-bind 的相同实例：


 
总价：

AngularJS 字符串


 
姓名： {{ firstName + " " + lastName }}

使用 ng-bind 的相同实例：


 
姓名：

AngularJS 对象


 
姓为 {{ person.lastName }}

使用 ng-bind 的相同实例：


 
姓为

AngularJS 数组


 
第三个值为 {{ points[2] }}

使用 ng-bind 的相同实例：


 
第三个值为

使用 ng-init 不是很常见。后面将有一个更好的初始化数据的方式。

AngularJS 指令

AngularJS 指令是扩展的 HTML 属性，带有前缀 ng-。
ng-app 指令初始化一个 AngularJS 应用程序。
ng-init 指令初始化应用程序数据。
ng-model 指令把元素值（比如输入域的值）绑定到应用程序。
更多指令

ng-app 指令告诉 AngularJS，
元素是 AngularJS 应用程序的"所有者"。
一个网页可以包含多个运行在不同元素中的 AngularJS 应用程序。

数据绑定

两个文本域是通过两个 ng-model 指令同步的：


 
价格计算器
 
数量： 
价格： 
 
总价： {{ quantity * price }}

重复 HTML 元素

ng-repeat 指令会重复一个 HTML 元素：


  使用 ng-repeat 来循环数组
  
    
      {{ x }}

ng-repeat 指令用在一个对象数组上：


 
循环对象：

  
    {{ x.name + ', ' + x.country }}

ng-app 指令

ng-app 指令定义了 AngularJS 应用程序的根元素。
ng-app 指令在网页加载完毕时会自动引导（自动初始化）应用程序。

ng-init 指令

ng-init 指令为 AngularJS 应用程序定义了初始值。
通常情况下，不使用 ng-init。您将使用一个控制器或模块来代替它。

ng-model 指令

ng-model 指令绑定 HTML 元素到应用程序数据。
ng-model 指令也可以：

为应用程序数据提供类型验证（number、email、required）。
为应用程序数据提供状态（invalid、dirty、touched、error）。
为 HTML 元素提供 CSS 类。
绑定 HTML 元素到 HTML 表单。

ng-repeat 指令

ng-repeat 指令对于集合中（数组中）的每个项会克隆一次 HTML 元素。

创建自定义的指令

除了 AngularJS 内置的指令外，我们还可以创建自定义指令。
你可以使用 app.directive 函数来添加自定义的指令。
要调用自定义指令，HTML 元素上需要添加自定义指令名。
使用驼峰法来命名一个指令， runoobDirective, 但在使用它时需要以 - 分割, runoob-directive:

你可以通过以下方式来调用指令：

元素名
属性
类名
注释

限制使用

你可以限制你的指令只能通过特定的方式来调用。

通过添加 restrict 属性,并设置只值为 "A", 来设置指令只能通过属性的方式来调用:

var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
    return {
        restrict : "A",
        template : "自定义指令!"
    };
});

HTML DOM

AngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令。

ng-disabled 指令

ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性。




  



  按钮



  {{ mySwitch }}

分析：
ng-disabled 指令绑定应用程序数据 "mySwitch" 到 HTML 的 disabled 属性。
ng-model 指令绑定 "mySwitch" 到 HTML input checkbox 元素的内容（value）。

如果 mySwitch 为true, 按钮将不可用:

如果 mySwitch 为false, 按钮则可用:

ng-show 指令

ng-show 指令隐藏或显示一个 HTML 元素。



  我是可见的。

  我是不可见的。

ng-show 指令根据 value 的值来显示（隐藏）HTML 元素。
你可以使用表达式来计算布尔值（ true 或 false）:


 
我是可见的。

ng-hide 指令

ng-hide 指令用于隐藏或显示 HTML 元素。



  我是不可见的。

  我是可见的。