Angular中的指令

什么是指令

指令是angular中一个很重要的概念，在我们学习什么是指令，我们先看一下html中的标签，html5中新增了很多标签，比如audio标签，使用这个标签我们可以在页面中嵌入一段视频。那么我们能不能自定义一个html标签呢，比如一个<萨摩耶></萨摩耶>标签，当我们往html中添加萨摩耶这个标签时，网页中就会出现一只萨摩耶卖萌的图片，答案是可以的，在angular中，我们可以通过自定义指令，或者说是标签（不准确）这种方式来实现。而什么是指令，可以暂时理解成我们自定义的一个html标签。（暂时这么理解，实际上不是）。

自定义一个标签

在自定义指令之前，先要简单介绍一下angular中指令的命名与调用。在angular中指令的命名都是以驼峰命名法来命名的，比如urlLinkText，除第一个单词的首字母小写外，所有的单词第一个字母大写。但是我们在html中使用这个指令的时候，要用url-link-text这样的方式来访问，angular内部会将-删掉，并将第一个字母替换成大写的字母。比如angular中的内置指令ng-app，在js中实际是以ngApp这样的方法命名的。
知道了命名后，我们现在开始自定义一个标签（指令）。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>自定义指令</title>
</head>
<body ng-app="myApp">
   <my-dog>
      
   </my-dog>
</body>
<script src="node_modules/angular/angular.js"></script>
<script>
 angular.module('myApp',[]).directive('myDog',function () {
      return{
         restrict:'E',
         replace:true,
         template:'<p>这里有一只敲可爱的萨摩耶</p>'
 }
   })
</script>
</html>

自定义一个指令需要使用directive这个方法，这个方法介绍两个参数，第一个参数是指令的名字，以驼峰命名法命名，第二个参数是一个匿名函数，它返回一个对象，对象的各个属性我介绍一下：

restrict 指令的类型，或者说是调用指令的方式，有4个值，E（元素）A（属性）C（类）M（注释），具体调用方式如下
```
<my-dog></my-dog>
<div my-dog></div>
<div class="my-dog"></div>
<!--directive:my-dog>
```
一般我们选择第二种，其他三种了解就可以了。
replace 是否用自定义元素取代指令声明
template：要代替的内容