创建指令
指令也是一种 服务，只是这种服务的定义有几个特殊要求：
- 必须使用模块的directive（）方法注册 服务
- 对象工厂必须返回一个指令定义的对象
- 指令在注入器种的登记名称是：指令名+Directive。例如ng-app指令的服务名称是:ngAPPDirective
指令定义对象
- 每个指令定义的工厂函数，需要返回一个指令定义对象
- 指令定义对象就是一个具有约定属性的javaScript对象，编译器$compile在编译时就根据这个定义对象对指令进行展开
指令定义对象的常用属性如下：
| 配置项 | 类型 | 含义 |
|---|---|---|
| template | string | 使用template指定的HTML标记替换指令内容（或指令自身） |
| restrict | string | 用来限定指令在HTML模板种出现的位置(E,A,C,M) |
| replace | true，falset | 是否替换原有的DOM元素 |
| transclude | true,false,’element’ | 是否保留原有指令的内部元素 |
| scope | true,false,{} | scope属性为指令创建私有的作用域 |
| link | function | link属性是一个函数 |
link
<!DOCTYPE html>
<html ng-app="zz">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<span zz-c>我是span</span>
</body>
<script src="js/angular.js"></script>
<script type="text/javascript">
angular.module('zz',[])
.directive('zzC',function(){
return{
link:function(scope,element,attrs){
element.on('mouseover',function(){
element.css({outline:'#ff0000 dotted thick'});
}).on('mouseout',function(){
element.css({outline:'none'});
})
}
}
})
</script>
</html>
restrict
<!DOCTYPE html>
<html ng-app="zz">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<hell></hell>
<div hell></div>
<div class="hell"></div>
<!-- directive:hell -->
</body>
<script src="js/angular.js"></script>
<script type="text/javascript">
angular.module('zz',[])
.directive('hell',function(){
return{
replace:true,
restrict:'ECMA',
template:'<h1>hell</h1>'
}
})
</script>
</html>
scope绑定策略
| 类型 | 用法 |
|---|---|
| @ | 把当前属性作为字符串传递，你还可以绑定来自外层scope上的值，从属性种插入{{}}即可 |
| = | 与父scope中的属性进行双向绑定 |
| &s | 传递一个来自父scope中的函数，稍后调用 |
complie和link
- compile函数用来对模板自身进行转换，而link函数负责咋模型和视图之间进行动态关联
- scope在链接阶段才会被绑定到编译之后的Link函数上
- compile函数仅在编译阶段运行一次，而对于指令的每个实例，link函数只会返回postlink函数
- 如果需要修改dom结构，应该在postlink种做这件事情，如果在prelink中做这件事会导致错误
不成功时会保留原样，并在model增加一个$error对象
click
<!DOCTYPE html>
<html ng-app="zz">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body ng-controller="cc">
时间格式：<input type="text" ng-model="format" /></br>
当前时间:<span current-time="format"></span>
</body>
<script src="js/angular.js"></script>
<script type="text/javascript">
angular.module('zz',[]).controller('cc',function($scope){
$scope.format='M/d/yy h:mm:ss a';
}).directive('currentTime',function($interval,dateFilter){
return{
link:function(scope,element,attrs){
function upatetime(){
element.text(dateFilter(new Date(),scope.format));
}
$interval(function(){
upatetime();
},1000);
}
}
})
</script>
</html>
指令交互
<!DOCTYPE html>
<html ng-app="zz">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="js/bootstrap.min.css"/>
</head>
<body>
<div class="container">
<div class="jumbotron text-center">
<girl beautiful clever></girl>
{{desc}}
</div>
</div>
<script src="js/angular.js"></script>
<script type="text/javascript">
angular.module('zz',[]).directive('girl',function(){
return {
restrict:'E',
controller:function($scope,$element,$attrs){
$scope.desc=[];
this.add=function(char){
$scope.desc.push(char);
console.log($scope.desc)
}
},
template:'<h1>angular bb</h1>'
}
}).directive('beautiful',function(){
return {
restrict:'A',
require:'girl',
link:function(scope,element,attrs,grilCtrl){
grilCtrl.add('beautiful');
}
}
}).directive('clever',function(){
return {
restrict:'A',
link:function(scope,element,attrs){
scope.desc.push('clever');
}
}
})
</script>
</body>
</html>