指令分类：
1）装饰器型指令
装饰器指令的作用是为DOM添加行为，使其具有某种能力。在AngularS中，大多数内置指令属于装饰器型指令，例如ng-click(单击事件)、ng-hide/ng-show(控制DOM元素的显示和隐藏)等
2）组件型指令
组件型指令是一个小型的整体，其中包含业务所需要显示的视图和交互逻辑，例如开发者要在页面添加某个功能
1、常用的内置指令
1.1 程序控制类
1.2 数据绑示类
<body ng-app="myApp" ng-controller="myCtrl">
姓名：<input type="text" ng-model="name">
<hr><!-- 差值表达式{{ }} -->
<span>输入的姓名为：{{ name }}</span>
<hr><!-- ng-bind指令 -->
<span ng-bind="name">输入的姓名为：</span>
<hr><!-- ng-model指令 -->
姓名：<input type="text" ng-model="name+'666'">
</body>
</html>
<script>
var app= angular.module('myApp',[]);
app.controller('myCtrl',function($scope){
// 定义属性name
$scope.name = "lucy";
});
</script>
1.3 访问流程类
1) ng-if
语法格式：
<element ng-if="expression"></element>示例：
<body ng-app="myApp" ng-controller="myCtrl">
篮球：<input type="checkbox" ng-model="isCheck">
<div ng-if="isCheck">
喜欢<input type="radio" name="hobby">
一般<input type="radio" name="hobby">
讨厌<input type="radio" name="hobby">
</div>
</body>
</html>
<script>
var app= angular.module('myApp',[]);
app.controller('myCtrl',function($scope){
$scope.isCheck = false;
});
</script>
2) ng-switch
语法格式：
<element ng-switch on="expression">
<element ng-switch-when="expression1">...</element>
<element ng-switch-when="expression1">...</element>
...
<element ng-switch-default>...</element>
</element>示例：实现每日食谱
<body ng-app="myApp" ng-controller="myCtrl">
<div ng-switch on="day">
周{{ day }}食谱
<div ng-switch-when="1">食品1</div>
<div ng-switch-when="2">食品2</div>
<div ng-switch-when="3">食品3</div>
<div ng-switch-when="4">食品4</div>
<div ng-switch-when="5">食品5</div>
<div ng-switch-when="6">食品6</div>
<div ng-switch-default>食品7</div>
</div>
</body>
</html>
<script>
var app= angular.module('myApp',[]);
app.controller('myCtrl',function($scope){
let day = new Date().getDay();
$scope.day = day;
});
</script>
3) ng-repeat
语法格式：
<element ng-repeat="item in collection"></element>注意：当数组中有重复元素时，需要使用 track by $index
示例：
<body ng-app="myApp" ng-controller="myCtrl">
<ul>
<li ng-repeat="item in datas">
{{item }}
</li>
</ul>
</body>
</html>
<script>
var app= angular.module('myApp',[]);
app.controller('myCtrl',function($scope){
$scope.datas = [10,20,30,40];
});
</script>1.4 事件绑定类
AngularJS指令不会覆盖JavaScript的事件，例如鼠标单击HTML元素时，ng-click指令与JavaScript的 on-click 事件将都会执行。
1.5 状态设置类
1.6 加载处理类
2、自定义指令
2.1 基本语法
AngularJS中使用模块的 directive() 函数来自定义指令
var app = angular.module('app',[]);
app.directive('指令名称',function(){
return{
template,
templateUrl,
replace ,
restrict,
...
}
})
