学习要点：
- 数据绑定
- 单向绑定
- 内联模块表达式 {{data}}
- ng-bind指令
- 模板绑定 ng-bind-template
- 阻止绑定
- 双向绑定
- 单向绑定
- 模板指令
JQ将HTML文档当作一个需要解决的问题，而NG则将HTML当作构建Web程序的基础。
NG有超过50个内置指令，同时你也可以自定义指定来增强程序的能力。
为什么要使用指令？
指令暴露了NG的核心功能，你可以只使用指令就完成你需要的功能
何时使用指令？
在NG的程序的各个部分都OK!
NG提供了许多内置的绑定数据和模板的指令，这里我们先预览一下：
接下来，我们将通过具体的例子来讲解其中大部分指令的用法和意思
准备项目代码
<!DOCTYPE>
<!-- use module -->
<html ng-app="exampleApp">
<head>
<title>Angular Directive</title>
<Meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
</head>
<body>
<div id="todoPanel" class="panel" ng-controller="defaultCtrl">
<h3 class="panel-header">To Do List</h3>
</div>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript"> // define a module named exampleApp angular.module("exampleApp",[]) // define a controller named defaultCtrl .controller('defaultCtrl',function ($scope) { // todo list $scope.todos = [ { action : 'play ball',complete : false },{ action : 'runnging',{ action : 'eating',complete : true },{ action : 'shopping',complete : false } ]; }) </script>
</body>
</html>
一、使用数据绑定指令
1.单向绑定
方式一：内联模块表达式
<div>There are {{todos.length}} items</div>
方式二：ng-bind指令
<div>There are <span ng-bind='todos.length'></span> items</div>
方式三：ng-bind-template模板绑定
<div ng-bind-template="First : {{todos[0].action}} . Second : {{todos[1].action}}."></div>
2.阻止内联数据绑定—ng-no-bindable
<div ng-non-bindable>{{todos[3].action}}</div>
3.双向绑定—ng-model
<div class="well">
<div>The first item is : {{todos[0].action}}</div>
</div>
<div class="form-group well">
<label for="firstItem">Set First Item : </label>
<input name="firstItem" class="form-control" ng-model="todos[0].action"/>
</div>
在你修改input中的值时，你会发现well中的值也在改变
二、使用模板指令
1.重复生成元素—ng-repeat
<table class="table table-striped table-bordered"> <thead> <tr><th>Action</th><th>Done</th></tr> </thead> <tbody> <!-- 重复生成元素 --> <!-- <tr ng-repeat="item in todos"> <td>{{item.action}}</td> <td>{{item.complete}}</td> </tr> --> <!-- 重复操作对象属性 --> <!-- <tr ng-repeat="item in todos"> <td ng-repeat="prop in item">{{prop}}</td> </tr> --> <!-- 使用数据对象的键值工作 --> <!-- <tr ng-repeat="item in todos"> <td ng-repeat="(key,value) in item"> {{key}} = {{value}} </td> </tr>--> <!-- 使用内置的变量$index，另外还有$first、$last等--> <tr ng-repeat="item in todos"> <td>{{$index + 1}}</td> <td ng-repeat="(key,value) in item"> {{key}} = {{value}} </td> </tr> </tbody> </table>
2.重复生成多个顶层元素
<table class="table table-striped table-bordered"> <thead> <tr><th>#</th><th>Action</th><th>Done</th></tr> </thead> <tbody> <tr ng-repeat-start="item in todos"> <td>This is item {{$index}}</td> </tr> <tr> <td>The action is : {{item.action}}</td> </tr> <tr ng-repeat-end> <td>Item {{$index}} is {{item.complete ? '' : "not "}} complete</td> </tr> </tbody> </table>
3.局部视图 —ng-include
先定义table.html视图
<table class="table table-striped table-bordered"> <thead> <tr><th>#</th><th>Action</th><th>Done</th></tr> </thead> <tbody> <tr ng-repeat="item in todos"> <td>{{$index + 1}}</td> <td ng-repeat="value in item"> {{value}} </td> </tr> </tbody> </table>
接着引入table.html视图
<ng-include src="'table.html'"></ng-include>
动态引入局部视图
我们需要动态引入table.html和lilst.html—需要定义
定义list.html视图
<ol> <li ng-repeat="item in todos"> {{item.action}} <span ng-if="item.complete"> (Done)</span> </li> </ol>
动态指定视图
$scope.viewFile = function () {
return $scope.showList ? "list.html" : "table.html";
}
当勾选复选框时，使用list.html视图，反而反之；
<div class="well">
<div class="checkBox">
<label>
<input type="checkBox" ng-model="showList"> Use the list view
</label>
</div>
</div>
<ng-include src="viewFile()"></ng-include>
4.将ng-include指令当作属性使用
其他部分不变
<div ng-include="viewFile()"></div>
5.有条件的交换元素— ng-switch,类似也JS的switch语句
<div class="well">
<div class="radio" ng-repeat="button in ['None','Table','List']">
<label>
<input type="radio" ng-model="data.mode" value="{{button}}" ng-checked="$first"/>{{button}}
</label>
</div>
</div>
<div ng-switch on="data.mode">
<div ng-switch-when="Table">
<ng-include src="'table.html'"></ng-include>
</div>
<div ng-switch-when="List">
<ng-include src="'list.html'"></ng-include>
</div>
<div ng-switch-default>
Select another option to display a layout
</div>
</div>
6.隐藏未处理的内联模块绑定表达式
在我们使用内联模块表达式{{}}时，可能会出现{{data}}类似的一闪而过的页面，这是我们需要对其隐藏
<div class="well" ng-cloak>
<div class="radio" ng-repeat="button in ['None','List']">
<label>
<input type="radio" ng-model="data.mode" value="{{button}}" ng-checked="$first"/>{{button}}
</label>
</div>
</div>
<div ng-switch on="data.mode" ng-cloak>
<div ng-switch-when="Table">
<ng-include src="'table.html'"></ng-include>
</div>
<div ng-switch-when="List">
<ng-include src="'list.html'"></ng-include>
</div>
<div ng-switch-default>
Select another option to display a layout
</div>
</div>
