指令是Angular的一个特殊标志，也是有别于其他框架的一个重要特征，Angular之所以功能强大，在很大程度上得益于它拥有大量内置的指令，也能通过语法自定义指令。从字面意义来说，“指令”是一种执行的信号，一旦发布了这个指令，就要执行某项动作。Angular中的指令是一个在特定DOM元素上执行的函数。
一、定义指令
在Angular中，定义一个新指令的方法很简单，只需要调用directive方法即可，该方法可以接收两个参数，具体的调用格式如下：
var app = angular.module("myapp", []);
app.directive(name, fn) ;
示例代码如下：
<!doctype html>
<html ng-app="MyModule">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="angular-1.3.0/angular.min.js"></script>
</head>
<body>
<hello></hello>
<div hello></div>
<div class="hello"></div>
<!-- directive:hello -->
<div></div>
<script type="text/javascript" >
var myModule = angular.module("MyModule", []);
myModule.directive("hello", function() {
return {
restrict: 'AEMC',
template: '<div>Hi everyone!</div>',
replace: true
}
});
</script>
</body>
</html>
执行结果如下：
二、指令对象的基础属性
replace属性值是布尔类型的，当该属性值为true时，表示将模板中的内容替换为指令为标记；当该属性值为false时，表示不替换指令标记，而是将内容插入到指令标记中，此时，无论指令标记中是否存在内容，都将被清空，该属性的默认值为false。
templateUrl的属性值是一个URL地址，该地址将指向一个模板页面，该属性常用于处理复杂模板内容，与template属性不能同时使用，只能取其中之一。
示例代码如下：
<!doctype html>
<html ng-app="MyModule">
<head>
<meta charset="utf-8">
<title>指令对象的基础属性</title>
<script type="text/javascript" src="angular-1.2.16/angular.min.js"></script>
<style type="text/css">
.frame{
padding:2px 8px;
margin: 0px;
font-size: 12px;
width:320px;
background-color: #eee;
}
</style>
</head>
<body>
<div class="frame">
<ts-tplfile></ts-tplfile>
<ts-tplscipt></ts-tplscipt>
<ts-tplcache></ts-tplcache>
</div>
<script type="text/ng-template" id="tpl">
<h3>模板内容来自于script元素</h3>
</script>
<script type="text/javascript">
var app=angular.module('MyModule',[])
.run(function($templateCache){
$templateCache.put('cache',
'<h3>模板内容来自缓存</h3>')
})
.directive('tsTplfile',function(){
return{
restrict:'EAC',
templateUrl:'tpl.html',
};
})
.directive('tsTplscipt',function(){
return{
restrict:'EAC',
templateUrl:'tpl',
replace:true
};
})
.directive('tsTplcache',function(){
return{
restrict:'EAC',
templateUrl:'cache',
};
});
</script>
</body>
</html>
三、Angular指令对象的重要属性
1.指令对象中的transclude属性
在定义指令对象时，可以不添加transclude属性，如果添加该属性，那么它的属性值是布尔类型的，默认值为false，表示不开启属性，如果设置为true时，则开启了该属性；当开启了属性后，就可以在模板中通过ng-transclude方式替换指令元素中的地内容。
代码示例如下：
<!doctype html>
<html ng-app="MyModule">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="angular-1.3.0/angular.min.js"></script>
</head>
<body>
<hello>
<div>这里是指令内部的内容。</div>
</hello>
<script type="text/javascript">
var myModule = angular.module("MyModule", []);
myModule.directive("hello", function() {
return {
restrict:"AE",
transclude:true,
template:"<div>Hello everyone!<div ng-transclude></div></div>"
}
});
</script>
</body>
</html>
2.指令对象中的link属性
“link”属性的值是一个函数，在该函数中可以操控DOM元素对象，包括绑定元素的各类事件，定义事件触发时执行的内容，函数定义的代码如下：
link:function(scope,element,attrs){
...
}
其中，scope参数表示指令所在的作用域，它的功能和页面中控制器注入的作用域是相同的，element参数表示指令中的元素，attrs表示指令元素的属性集合。
示例代码如下：
<!doctype html>
<html ng-app="MyModule">
<head>
<meta charset="utf-8">
<title>指令对象的link属性</title>
<script type="text/javascript" src="angular-1.2.16/angular.min.js"></script>
<style type="text/css">
.frame{
padding:2px 8px;
margin: 0px;
font-size: 12px;
width:320px;
background-color: #eee;
}
.tip{
font-size: 9px;
color:#666;
margin:3px 5px;
}
</style>
<script type="text/ng-template" id="tpl">
<button>单击按钮</button>
</script>
</head>
<body>
<div class="frame">
<ts-tplscipt></ts-tplscipt>
<div class="tip">{{content}}</div>
</div>
<script type="text/javascript">
var app=angular.module('MyModule',[])
.directive('tsTplscipt',function(){
return{
restrict:'EAC',
templateUrl:'tpl',
replace:true,
link:function(scope,element,attrs){
element.bind('click',function(){
scope.$apply(function(){
scope.content='这是点击后的内容';
})
attrs.$$element[0].disable=true;
});
}
};
});
</script>
</body>
</html>
3.指令对象的scope属性
（1）scope属性是布尔值
scope属性自定义指令时，默认值就是布尔类型的，初始值为false。在这种情况下，指令中的作用域就是指令元素所在的作用域，两者是相同的。如果scope属性值为true,则表示子作用域（指令中的作用域成为子作用域，把指令元素所在的作用域称为父作用域）是独立创建的，当它的内容发生变化时，并不会修改父作用域中的内容。示例代码如下：
<!doctype html>
<html ng-app="MyModule">
<head>
<meta charset="utf-8">
<title>scope属性</title>
<script type="text/javascript" src="angular-1.2.16/angular.min.js"></script>
<style type="text/css">
.frame{
padding:2px 8px;
margin: 0px;
font-size: 12px;
width:320px;
background-color: #eee;
}
.tip{
font-size: 9px;
color:#666;
margin: 3px 5px;
}
</style>
<script type="text/ng-template" id="tpl">
<div class="tip">{{message}}</div>
<button ng-transclude></button>
</script>
</head>
<body>
<div class="frame">
<input ng-model="message" placeholder="请输入内容"/>
<ts-message>固定</ts-message>
</div>
<script type="text/javascript">
var app=angular.module('MyModule',[])
.directive('tsMessage',function(){
return{
restrict:'EAC',
templateUrl:'tpl',
transclude:true,
scope:true,
link:function(scope,element,attrs){
element.bind('click',function(){
scope.$apply(function(){
scope.message='这是单击按钮后的值';
})
})
}
};
});
</script>
</body>
（2）scope属性是对象
scope属性值还可以设置成一个JSON对象，如果是对象，那么，父作用域与自作用域是完全独立的，不存在任何联系。当指令中的scope属性值是JSON对象时，如果子作用域需要添加属性，必须先添加指令中的link函数，然后，通过函数中的scope对象进行添加；如果在子作用域中，要绑定或调用父作用域中的属性和方法，则需要在scope属性对应的的JSON对象值中添加绑定策略。
