angularjs指令

angularjs指令的作用：
angularjs是通过指令来扩展html。
angularjs通过内置的指令来为应用添加功能。
什么是angularjs指令？
angularjs指令是扩展的html属性，带有前缀ng-，在angularjs中有很多内置指令。
例如最常用到的指令：
ng-app 定义应用程序的根元素
ng-controller 定义应用的控制器
ng-init 定义应用的初始化值
ng-model 绑定html控制器的值到应用数据
ng-repeat 定义集合中每项数据的模板
ng-bind 绑定html元素到应用程序数据
ng-bind-template 规定要使用模板替换的文本内容
ng-change 规定在内容改变时要执行的表达式
ng-checked 规定元素是否被选中
等......
数据绑定
例如：

<div ng-app="myApp"><div ng-controller="myCtrl">数量：<input type="number" ng-model="quantity">单价：<input type="number" ng-model="price"><br>总价：<span>{{quantity * price}}</span></div></div><script type="text/javascript">var app = angular.module("myApp",[]);app.controller("myCtrl",function($scope){$scope.quantity = 2;$scope.price = 5;});</script>

在上面实例中的{{quantity * price}}表达式是一个angularjs数据绑定表达式，angularjs中的数据绑定，同步了angularjs表达式与angularjs数据，{{quantity * price}}是通过ng-model="quantity"与 ng-model="price"进行同步的。

ng-model指令：绑定html元素到应用程序数据。
ng-model指令也可以：
1、为应用程序数据提供类型验证（number、email、required）。
2、为应用程序数据提供状态（invalid、dirty、touched、error）。
3、为html提供css类
4、绑定html元素到html表单
ng-repeat用于重复html元素：

例如：

<div ng-app="myApp"><div ng-controller="myCtrl"><ul><li ng-repeat="x in names">{{x}}</li></ul></div></div><script>var app = angular.module("myApp",[]);app.controller("myCtrl",["$scope",myCtrl]);function myCtrl($scope){$scope.names=['zhang','san','li','si'];}</script>

或：我们将ng-repeat指令用在一个数组对象上。

<div ng-app="myApp"><div ng-controller="myCtrl"><ul><li ng-repeat="x in person">{{x.name + " , " + x.job}}</li></ul></div></div><script type="text/javascript">var app = angular.module("myApp",[]);app.controller("myCtrl",["$scope",myCtrl]);function myCtrl($scope){$scope.person = [{name:"zhangsan",job:"前端工程师"},{name:"lisi",job:"后台工程师"},{name:"wangwu",job:"UI设计师"}];}</script>

创建自定义的指令：
在angularjs中我们除了可以使用内置外，还可以创建自定义指令。
我们在创建自定义指令是需要使用.directive函数来添加自定义的指令。
注意：
我们在自定义指令的时候，指令的命名需要使用驼峰法，如myFile，但是在使用的时候需要以-分割，如<my-file></my-file>

例如：

<div ng-app="myApp"><my-file></my-file></div><script type="text/javascript">var app = angular.module("myApp",[]);app.directive("myFile",function(){return {template:'<p>这是自定义指令</p>'}});</script>

我们可以通过一下几种方式来调用自定义指令
1、元素名
2、属性
3、类名
4、注释
我们也可以限制我们自定义的指令通过哪种方式来调用，就是说我们可以限制用什么方式来调用我们自定义的指令，否则无法调用指令。
我们先分别看看用不同的方式调用一下自定义的指令。
使用元素名调用

<div ng-app="myApp"><my-file></my-file></div><script type="text/javascript">var app = angular.module("myApp",[]);app.directive("myFile",function(){return {template:'<p>这是自定义指令</p>'}});</script>

使用属性调用

<div ng-app="myApp"><div my-file></div></div><script type="text/javascript">var app = angular.module("myApp",[]);app.directive("myFile",function(){return {template:'<p>这是自定义指令</p>'}});</script>使用类名调用<div ng-app="myApp"><div class="my-file"></div></div><script type="text/javascript">var app = angular.module("myApp",[]);app.directive("myFile",function(){return {restrict : "C",template:'<p>这是自定义指令</p>'}});</script>

使用注释调用

<div ng-app="myApp"><!-- directive: my-file --></div><script type="text/javascript">var app = angular.module("myApp",[]);app.directive("myFile",function(){return {restrict : "M",        replace : true,template:'<p>这是自定义指令</p>'}});</script>

注意：我们在上面的 使用类名调用 与 使用注释调用中都用到了restrict属性，但是使用元素名调用与使用属性调用却没有用到restrict。

restrict属性：
我们想要实现限制自定义的指令通过哪种方式来调用，就需要添加restrict属性，这个属性有四个值，分别是：
1、E 作为元素名使用
2、A 作为属性使用
3、C 作为类名使用
4、M 作为注释使用
但是restrict属性的默认值为E/A，就是说我们在不添加restrict属性的情况下默认就可以使用元素名和属性名来调用，这也就是上面的实例中 使用元素名调用 与 使用属性调用 没有用到restrict属性但是依然可以调用的原因。但是 使用注释调用 比较特殊，我们在使用 使用注释调用 的时候不仅需要添加restrict属性还需要添加replace属性，replace属性的值为布尔值，当值为true的时候为可见，为false的时候为不可见。
如有理解不当之处，欢迎各位老铁留言指正。谢谢！！！！