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的时候为不可见。
如有理解不当之处，欢迎各位老铁留言指正。谢谢！！！！