AngularJS权威指南-指令

《AngularJS 权威教程》读书笔记，第八，九章——指令。

简介

指令是啥？就是 AngularJS 用来扩展 HTML 功能的“洛基的权杖”

内置指令

内置指令简介

当在 HTML 中使用标签时，并不一定能明确看出是否在使用指令，例如：<form> 标签被从底层扩展了一系列高级功能，包括表单验证等，原生 HTML 表单并不会提供这些功能

内置布尔属性

根据 HTML 标准的定义，布尔属性代表一个 true 或 false 值。当这个属性出现时，这个属性的值就是 true（无论实际定义的值是什么）；如果未出现，这个属性的值就是 false。
当在 AngularJS 中使用动态数据绑定时，不能简单地将这个属性值设置为 true 或 false，因为根据标准定义只有当这个属性不出现时，它的值才为 false。因此 AngularJS 提供了一组带有 ng- 前缀版本的布尔属性，通过运算表达式的值来决定在目标元素上插入还是移出对应的属性。
AngularJS 中的内置布尔属性指令有：

ng-disabled
ng-readonly
ng-checked（<input type="checkbox"/>）
ng-selected（select 的 option 标签）

AngularJS 中的类布尔属性（非标准 HTML 布尔属性，但是行为相似）有：

ng-href：可以动态修改 a 标签的 href 属性
ng-src：AngularJS 会告诉浏览器在 ng-src 对应的表达式生效之前不要加载图像，防止浏览器产生 404 网络请求
ng-class
ng-style

看完这个类布尔属性，也没发现它们行为相似啊。。。

其他内置指令（都跟作用域相关，一般都会生成一个独立的作用域）

ng-app：该指令为 AngularJS 应用创建 $rootScope
ng-controller：该指令会创建 $scope，$scope 会从父级 $scope（有可能为 $rootScope）那里继承属性和方法。$scope 是一个对象，它的职责是承载 DOM 中指令所共享的操作（标准的 JavaScript 方法）和模型（模型是指￥scope 上保存的包含瞬时状态数据的 JavaScript 对象，持久化状态的数据应该保存到服务中，服务的作用是处理模型的持久化）。
ng-include：该指令可以加载、编译并包含外部 HTML 片段到当前应用中，但模板的 URL 被限制在与应用文档相同的域和协议下，可以通过白名单或包装成被信任的值来突破限制。更进一步，需要考虑跨域资源共享（Cross-Origin Resource Sharing，CORS）和同源规则（Same Origin Policy）。注意：该指令默认会自动创建一个子作用域，如果想使用某个特定的作用域，则必须在同一个 DOM 元素上添加 ng-controller=”ControllerA”。

ng-switch：该指令用法如下（跟 switch 差不多，但 default 在最前面）：

<input type="text" ng-model="person.name" />
<div ng-switch on="person.name">
  <p ng-switch-default>And the winner is </p>
  <h1 ng-switch-when="Ari">{{ person.name }}</h1>
</div>

ng-view：用来设置将被路由管理和放置在 HTML 中的视图的位置
ng-if：生成或移出一个节点（ng-show 和 ng-hide 是通过 CSS 来显示或隐藏节点的）
ng-repeat：用来遍历一个集合或为集合中的每个元素生成一个模板实例，集合中每个元素都会被赋予自己的模板和作用域，同时还有额外属性：$index, $first, $middle, $last, $even, $odd
ng-init：很简单的指令，之所以放在这里也是因为它会生成单独的作用域吧！
｛｛｝｝：没错，就是模板表达式，实际上它是 ng-bind 的简略形式，用这种形式不需要创建新的元素，因此它常被用在行内文本中。注意：在屏幕可视的区域内使用｛｛｝｝会导致页面加载时未渲染的元素发生闪烁，用 ng-bind 可以避免这个问题
ng-bind：HTML 加载含有｛｛｝｝语法的元素后并不会立刻渲染它们，导致未渲染内容闪烁（Flash of Unrendered Content，FOUC），这里说的应该就是：刚开始看到了 ｛｛ xxx ｝｝ 这样的内容，后来才看到具体变量的值 AAA。使用 ng-bind 就不会有这样的问题
ng-cloak：除了使用 ng-bind 来避免未渲染元素闪烁，还可以在含有｛｛｝｝的元素上使用 ng-cloak 指令。ng-cloak 指令会将内部元素隐藏，直到路由调用对应的页面时才显示出来。
ng-bind-template：同 ng-bind 指令类似，ng-bind-template 用来在视图中绑定多个表达式
ng-model：该指令用来将 input、select、text area 或自定义表单控件同包含它们的作用域中的属性进行绑定。它可以提供并处理表单验证功能，在元素上设置相关的 CSS 类（ng-valid、ng-invalid等），并负责在父表单中注册控件
ng-show/ng-hide：ng-if 都会了，更别提这俩了
ng-change：表单输入变化时触发
ng-form 用来在一个表单内部嵌套另一个表单（普通的 HTML <form> 标签不允许嵌套），这意味着内部所有子表单都合法时，外部的表单才会合法。Angular 不会将表单提交到服务器，除非它指定了 action 属性。要指定提交表单时调用哪个 JavaScript 方法，使用下面两个指令中的一个：
- ng-submit：在表单元素上使用
- ng-click：在第一个按钮或submit类型的输入字段上使用
ng-click：不说了
ng-select：
ng-submit：用来将表达式同 onsubmit 事件进行绑定，这个指令同时会阻止默认行为（发送请求并重新加载页面）

ng-class：使用 ng-class 动态设置元素的类，用法如下：

.red {
    background-color: red;
}
<div ng-class="{red: x > 5}" ng-if="x > 5">
    You won!
</div>
<button ng-click="x = generateNumber()" ng-init="x = 0">Draw Number</button>
<p>Number is: {{ x }}</p>

ng-attr-(suffix)：当 AngularJS 编译 DOM 时会查找花括号｛｛ some expression ｝｝内的表达式，这些表达式会被自动注册到 $watch 服务中并更新到 $digest 循环中，成为它的一部分。有时浏览器会对属性会进行很严苛的限制，SVG就是一个例子：
1
2
3
<svg>
<circle cx="{{ cx }}"></circle>
</svg>

运行上面的代码会抛出一个错误，指出我们有一个非法属性。可以使用 ng-attr-cx 来解决这个问题。注意，cx 位于这个名称的尾部：

1
2
3

<svg>
    <circle ng-attr-cx="{{ cx }}"></circle>
</svg>

Javaer

Just for fun

AngularJS权威指南-指令

简介

内置指令

内置指令简介

内置布尔属性

其他内置指令（都跟作用域相关，一般都会生成一个独立的作用域）