指令（Directive）
AngularJS 有一套完整的、可扩展的、用来帮助 Web 应用开发的指令集
在 DOM 编译期间，和 HTML 关联着的指令会被检测到，并且被执行
在 AngularJS 中将前缀为 ng- 这种属性称之为指令，其作用就是为 DOM 元素调用方法、定义行为绑定数据等
简单说：当一个 Angular 应用启动，Angular 就会遍历 DOM 树来解析 HTML，根据指令不同，完成不同操作
HTML5 允许扩展的（自制的）属性，以 data- 开头。
AngularJS 属性以 ng- 开头，但是可以使用 data-ng- 来让网页对 HTML5 有效。
ng-app
- ng-app 指令用于告诉 AngularJS 应用当前这个元素是根元素。
- 所有 AngularJS 应用都必须要一个根元素。
- HTML文档中只允许有一个 ng-app 指令，如有多个 ng-app 指令，则只有第一个会被使用。
- 常放在html标签上
<!DOCTYPE html>
<html lang="zh-CN" ng-app="MyApp"> <!--常放于此-->
<head>
<Meta charset="UTF-8">
<title>ng-app 指令</title>
</head>
<body>
<script> var myp = angular.module("MyApp",[]); myp.controller('HelloController',['$scope',function($scope) { $scope.p = {name: 'MyName'}; } ]); </script>
</body>
</html>
ng-repeat
- ng-repeat指令用来编译一个数组重复创建当前元素
- 元素如果相同可以使用 item in items track by $index
- 循环中的特殊变量，包括：
| 变量 | 类型 | 描述 |
|---|---|---|
| $index | number | 当前索引。 |
| $first | boolean | 当循环的对象存在第一项时为true。 |
| $middle | boolean | 当循环的对象存在中间项时为true。 |
| $last | boolean | 当循环对象存在最后一项时为true。 |
| $even | boolean | 当前索引是偶数则为true，否则为false |
| $odd | boolean | 当前索引是奇数则为true，否则为false |
<body ng-app="myApp"> <ul ng-controller="ListController"> <!-- ng-repeat 会遍历数组中每一个元素，分别创建li --> <li ng-repeat="item in items" data-id="{{item.id}}"> <p>{{item.name}}</p> </li> </ul> <script src="../angular/angular.js"></script> <script> angular.module('myApp',[]) .controller('ListController',function($scope) { $scope.items= []; for (var i = 1; i < 10; i++) { $scope.items[$scope.items.length] = { id: i,name: 'id:' + i,}; } }]); </script> </body>
ng-bind
ng-bind指令在绑定的值包含HTML时会转义，为了安全（跨站脚本攻击）
<body ng-app ng-init="username='<h1>shit</h1>'"> <!-- <strong>{{username}}</strong> --> <strong ng-bind="username"></strong> <script src="../angular/angular.js"></script> </body>
ng-bind-html
ng-bind-html 指令是通一个安全的方式将内容绑定到 HTML 元素上。
当你想让 AngularJS 在你的应用中写入 HTML，你就需要去检测一些危险代码。通过在应用中引入 “angular-santize.js” 模块，使用 ngSanitize 函数来检测代码的安全性。
<body ng-app="myApp" ng-init="username='<h1>shit</h1>'"> <!-- <strong>{{username}}</strong> --> <!-- ng-bind指令在绑定的值包含HTML时会转义，为了安全（跨站脚本攻击） --> <strong ng-bind-html="username"></strong> <script src="../angular/angular.js"></script> <script src="../angular-sanitize/angular-sanitize.js"></script> <script> // 使用自定义的模块才可以依赖别的包里面定义模块，angular定义的默认模块没有依赖任何 angular.module('myApp',['ngSanitize']); </script>
ng-class
ng-class 指令用于给 HTML 元素动态绑定一个或多个 CSS 类。
ng-class 指令的值可以是字符串，对象，或一个数组。
如果是字符串，多个类名使用空格分隔。
如果是对象，需要使用 key-value 对，key 是一个布尔值，value 为你想要添加的类名。只有在 key 为 true 时类才会被添加。
如果是数组，可以由字符串或对象组合组成，数组的元素可以是字符串或对象。
<ul class="messages"> <li ng-repeat="item in messages track by $index" ng-class="{red:item.read}"> {{item.content}} </li> </ul>
ng-show/ng-hide
- ng-show 指令在表达式为 true 时显示指定的 HTML 元素，否则隐藏指定的 HTML 元素。
- ng-hide 指令在表达式为 true 时隐藏 HTML 元素。
- ng-hide 是 AngularJS 的预定义类，设置元素的 display 为 none。
ng-if
ng-if 指令用于在表达式为 false 时移除 HTML 元素。
如果 if 语句执行的结果为 true，会添加移除元素，并显示。
ng-if 指令不同于 ng-hide， ng-hide 隐藏元素，而 ng-if 是从 DOM 中移除元素。
保留 HTML:
<input type="checkBox" ng-model="myVar" ng-init="myVar = true">
<div ng-if="myVar">
<h1>Welcome</h1>
<p>Welcome to my home.</p>
<hr>
</div>
ng-href/ng-src
ng-href 指令覆盖了原生的 <a> 元素 href 属性。
如果在 href 的值中有 AngularJS 代码，则需要使用 ng-href 而不是 href。
ng-href 指令确保了链接是正常的，即使在 AngularJS 执行代码前点击链接。
-
ng-src 指令覆盖了 <img> 元素的 src 属性。
如果你使用了 AngularJS 代码设置图片地址，请使用 ng-src 指令替代 src 属性。
ng-src 指令确保的 AngularJS 代码执行前不显示图片。
<img ng-src="{{imgUrl}}" alt=""> <a ng-href="{{imgUrl}}">跳转到图片</a>
